将新行插入到带有选择下拉列表的表格中[重复]

Question

此问题已经在这里有了答案：

How to add Dynamically table row including text boxes and select box with Different Ids（2个答案）

[<18天前关闭。

逻辑：从下拉列表中选择一个项目，然后将其放入表格中，并再输入四个“项目，数量，价格，总计”。在“项目”列中，必须显示所选的项目。每个选定的商品都有数量和价格。在总计栏中必须显示数量和价格的总和。并应根据用户需要插入任意数量的项目。我对此真的很困惑，之前还没有做过这样的工作。任何帮助将不胜感激。

这是选择项下拉菜单

<div class="form-group">
     <label class="control-label col-md-3">Items
         <span class="required"> * </span>
     </label>
     <div class="col-md-5">
       <select class="form-control select2me" name="item_id" id="selectitems">
          <option value=""></option>
             @foreach($items as $item)
              <option value="{{ $item->id }}"> {{ $item->name }} ({{ $item->cname}}) </option>
             @endforeach
       </select>
  </div>
</div>

表格
<table class="table table-bordered" id="dynamicTable">  
            <tr>
                <th>Item</th>
                <th>Qty</th>
                <th>Price</th>
                <th>Total</th>
            </tr>

        </table> 

Answer 1

方法：使用JavaScript将以下功能添加到文件的中。使用javascript，我们向其中添加了一个事件侦听器，以便在选择该项时调用该函数。调用该函数时，将访问项目值并使用所需值创建新行。

window.onload=function() {
var select_element = document.getElementById("selectitems");
select_element.onchange = function() {
    var item = this.value;
    var table = document.getElementById("dynamicTable");
    // create new row at desired position
    var row = table.insertRow(-1) // use -1 to insert in last position (can also use 0 to insert in first place and so on)
    // Insert new cells (<td> elements) at the <tr> element:
    var cell_item = row.insertCell(0);
    var cell_quanitity = row.insertCell(1);
    // add rest of the columns here
    // Add some text to the new cells:
    cell_item.innerHTML = item;
    cell_quantity.innerHTML = "3";
    // similarly set text for rest of the columns here
} 
}

希望这有所帮助