程序员经验分享-hwhale

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

2024-04-15

我开发了一个表。它具有在按下按钮时动态生成表格行的功能。但在添加新行时我无法添加选择框。我怎样才能做到这一点？下面列出了 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')" 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')" class="btn-success form-control"/></td>
                                            <td><input type="button" value="Remove" onclick="deleteRow('item-table');" class="form-control btn-danger" /></td>
                                        -->
  </tr>

</table>

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

可以使用以下方式克隆选择列表Node.cloneNode() https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode。原始选择列表可以使用选择器来定位Element.querySelector() https://developer.mozilla.org/en-US/docs/Web/API/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() https://api.jquery.com/clone/方法的工作原理类似。由于 jQuery 在原始帖子中被标记，因此也可以使用它，使用.attr() https://api.jquery.com/attr/#attr2设置 id 属性和.appendTo() http://api.jquery.com/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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

php

jQuery

html

css

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

随机推荐

热门标签