如何添加动态表行包括文本框和选择具有不同ID的框

Question

我开发了一张桌子。它有一个工具，可以在按下按钮时动态生成表格行。但是在添加新行时，我无法添加选择框。我怎样才能做到这一点？下面列出了HTML和JS代码。

function addRow(tableID) {

  var table = document.getElementById(tableID);

  var rowCount = table.rows.length;

  var row = table.insertRow(rowCount);

  var cell1 = row.insertCell(0);
  var element1 = document.createElement("input");
  element1.type = "checkbox";
  element1.id = 'text' + rowCount + '';
  element1.name = "chkbox[]";
  cell1.appendChild(element1);

  //var cell2 = row.insertCell(1);
  //cell2.innerHTML = rowCount + 1;

  var cell2 = row.insertCell(1);
  var element2 = document.createElement("input");
  element2.type = "text";
  element2.className = "form-control";
  element2.title = "Item-name";
  element2.id = 'item-name' + rowCount + '';
  element2.name = "item-name[]";
  cell2.appendChild(element2);

  var cell3 = row.insertCell(2);
  var element3 = document.createElement("input");
  element3.type = "text";
  element3.className = "form-control";
  element3.title = "Item-name";
  element3.id = 'qty' + rowCount + '';
  element3.name = "qty[]";
  cell3.appendChild(element3);

  var cell4 = row.insertCell(3);
  var element4 = document.createElement("input");
  element4.type = "text";
  element4.className = "form-control";
  element4.title = "Item-name";
  element4.id = 'unit-price-' + rowCount + '';
  element4.name = "unit-price[]";
  cell4.appendChild(element4);

  var cell5 = row.insertCell(4);
  var element5 = document.createElement("input");
  element5.type = "text";
  element5.className = "form-control";
  element5.title = "Item-name";
  element5.id = 'toatal-' + rowCount + '';
  element5.name = "total-[]";
  cell5.appendChild(element5);
}

function deleteRow(tableID) {
  try {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    for (var i = 0; i < rowCount; i++) {
      var row = table.rows[i];
      var chkbox = row.cells[0].childNodes[0];
      if (null != chkbox && true == chkbox.checked) {
        if (rowCount <= 3) {
          alert("Cannot delete all the rows.");
          break;
        }
        table.deleteRow(i);
        rowCount--;
        i--;
      }
    }
  } catch (e) {
    alert(e);
  }
}

<table class="table table-striped table-hover" style="background-color:white; text-align: center;" id="item-table">
  <tr>
    <td></td>
    <td> </td>
    <td></td>
    <td><input type="button" value="Add Row" id="btn-addrow" onclick="addRow('item-table');idincrement;" class="btn-success form-control" /></td>
    <td><input type="button" value="Remove" onclick="deleteRow('item-table');" class="form-control btn-danger" /></td>
  </tr>
  <tr>
    <th></th>
    <th style="text-align: center">Item Name</th>
    <th style="text-align: center">Quantity</th>
    <th style="text-align: center">unit Price</th>
    <th style="text-align: center">total</th>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td class="col-md-4">
      <select name="selected_item[]" class="form-control">
                                                    <?php
                                                    include ('../svr/connection.php');
                                                    $sql = "SELECT * FROM User";
                                                    $result = mysqli_query($conn, $sql);
                                                    while ($row = mysqli_fetch_array($result)) {
                                                        echo '<option value=' . $row['user_name'] . '>' . $row['user_name'] . '</option>';
                                                    }
                                                    ?>   
                                                </select>
    </td>
    <td><input type="text" name="it_re_qty[]" class="form-control"></td>
    <td><input type="text" id="y" name="unit_price[]" class="form-control"></td>
    <td><input type="text" id="it_re_qty" name="total[]" class="form-control col-md-1"></td>
    <!--<td> <input type="button"  value="Add Row" id="btn-addrow" onclick="addRow('item-table');idincrement;" class="btn-success form-control"/></td>
                                            <td><input type="button" value="Remove" onclick="deleteRow('item-table');" class="form-control btn-danger" /></td>
                                        -->
  </tr>

</table>

Answer 1

不确定您的意思，但如果您正在谈论的是“物品名称”。列，尝试更改： var element2 = document.createElement("input"); 到 var element2 = document.createElement("select");

Answer 2

  

但是在添加新行时我无法添加选择框。我怎样才能做到这一点？

可以使用Node.cloneNode()克隆选择列表。使用Element.querySelector()可以使用选择器找到原始选择列表，如下面的代码所示：

var selectList = table.rows[2].querySelector('select');
var element2 = selectList.cloneNode(true); //pass true for deep clone (to include options)
//set the id property
element2.id = 'selected-item'+rowCount;
cell2.appendChild(element2);

请参阅下面的代码段中的演示。

正如其他人所提到的，jQuery的.clone()方法的工作方式类似。由于jQuery在原始帖子中被标记，因此也可以使用.attr()来设置id属性，并使用.appendTo()将选择列表添加到新表格行中的单元格中：

var selectList = $('select.form-control');
var element2 = selectList.clone(); //performs deep clone by default
element2.attr('id','selected-item'+rowCount);
element2.appendTo(cell2);

function addRow(tableID) {

  var table = document.getElementById(tableID);

  var rowCount = table.rows.length;

  var row = table.insertRow(rowCount);

  var cell1 = row.insertCell(0);
  var element1 = document.createElement("input");
  element1.type = "checkbox";
  element1.id = 'text' + rowCount + '';
  element1.name = "chkbox[]";
  cell1.appendChild(element1);

  //var cell2 = row.insertCell(1);
  //cell2.innerHTML = rowCount + 1;

  var cell2 = row.insertCell(1);
  var selectList = table.rows[2].querySelector('select');
  /*var element2 = document.createElement("select");
  element2.className = "form-control";
  element2.id = 'item-name' + rowCount + '';
  element2.name = "selected_item[]";
  var existingOptions = table.rows[0].querySelector('option');
  existingOptions.each(function(option) {
  
      element2.appendchild(option.cloneNode(true));
  });*/
  var element2 = selectList.cloneNode(true);
  element2.id = 'selected-item'+rowCount;
  cell2.appendChild(element2);

  var cell3 = row.insertCell(2);
  var element3 = document.createElement("input");
  element3.type = "text";
  element3.className = "form-control";
  element3.title = "Item-name";
  element3.id = 'qty' + rowCount + '';
  element3.name = "qty[]";
  cell3.appendChild(element3);

  var cell4 = row.insertCell(3);
  var element4 = document.createElement("input");
  element4.type = "text";
  element4.className = "form-control";
  element4.title = "Item-name";
  element4.id = 'unit-price-' + rowCount + '';
  element4.name = "unit-price[]";
  cell4.appendChild(element4);

  var cell5 = row.insertCell(4);
  var element5 = document.createElement("input");
  element5.type = "text";
  element5.className = "form-control";
  element5.title = "Item-name";
  element5.id = 'toatal-' + rowCount + '';
  element5.name = "total-[]";
  cell5.appendChild(element5);



}

function deleteRow(tableID) {
  try {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    for (var i = 0; i < rowCount; i++) {
      var row = table.rows[i];
      var chkbox = row.cells[0].childNodes[0];
      if (null != chkbox && true == chkbox.checked) {
        if (rowCount <= 3) {
          alert("Cannot delete all the rows.");
          break;
        }
        table.deleteRow(i);
        rowCount--;
        i--;
      }


    }
  } catch (e) {
    alert(e);
  }
}

<table class="table table-striped table-hover" style="background-color:white; text-align: center;" id="item-table">
  <tr>
    <td></td>
    <td> </td>
    <td></td>
    <td><input type="button" value="Add Row" id="btn-addrow" onclick="addRow('item-table');" class="btn-success form-control" /></td>
    <td><input type="button" value="Remove" onclick="deleteRow('item-table');" class="form-control btn-danger" /></td>
  </tr>
  <tr>
    <th></th>
    <th style="text-align: center">Item Name</th>
    <th style="text-align: center">Quantity</th>
    <th style="text-align: center">unit Price</th>
    <th style="text-align: center">total</th>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td class="col-md-4">
      <select name="selected_item[]" class="form-control">
            <option></option>  
            <option value="laurie">Laurie</option> 
            <option value="sam">Sam</option>  
       </select>
    </td>
    <td><input type="text" name="it_re_qty[]" class="form-control"></td>
    <td><input type="text" id="y" name="unit_price[]" class="form-control"></td>
    <td><input type="text" id="it_re_qty" name="total[]" class="form-control col-md-1"></td>
    <!--<td> <input type="button"  value="Add Row" id="btn-addrow" onclick="addRow('item-table');idincrement;" class="btn-success form-control"/></td>
                                            <td><input type="button" value="Remove" onclick="deleteRow('item-table');" class="form-control btn-danger" /></td>
                                        -->
  </tr>

</table>