如何动态添加包括文本框和带有不同ID的选择框的表行 [英] How to add Dynamically table row including text boxes and select box with Different Ids

问题描述

我已经开发了一张桌子.它具有在按下按钮时动态生成表行的功能.但是我无法在添加新行时添加选择框.我怎样才能做到这一点?下面列出了HTML和JS代码.

I have developed a table. It has a facility to generate a table row dynamically when a button is pressed. But I am unable to add a select box when adding a new row. How can I do this? The HTML and JS codes are listed below.

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>

推荐答案

但是添加新行时，我无法添加选择框.我怎样才能做到这一点?

But I am unable to add a select box when adding a new row. How can I do this?

可以使用 Node.cloneNode( ).原始选择列表可以使用元素与选择器一起定位. querySelector()，如下面的代码所示:

The select list can be cloned using Node.cloneNode(). And the original select list can be located with a selector using Element.querySelector(), like in the code below:

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);

在下面的代码段中查看对此的演示.

See a demonstration of this in the snippet below.

就像其他人提到的那样，jQuery的 .clone()方法的工作原理与此类似.由于jQuery在原始帖子中被标记，因此也可以使用 .attr()设置id属性，并 .appendTo()将选择列表添加到新表格行:

As others have mentioned, jQuery's .clone() method works similarly. Since jQuery was tagged in the original post, this could be used as well, using .attr() to set the id attribute and .appendTo() to add the select list to a cell in the new table row:

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>

这篇关于如何动态添加包括文本框和带有不同ID的选择框的表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！