Question

我正在尝试在点击id = btnASize的按钮时动态添加三个文本框的行，并且点击id = btnASizeR的按钮想要添加一个由四个文本框组成的行。并且在单击id = btnWdDelete的按钮时，要删除使用文本框生成的最后一行，依此类推。上面提到的三个按钮是动态生成的，并且在点击这些动态按钮时也会创建将在现有行下面生成的带有文本框的行。任何想法都将被赞赏参考图像

$("#btnASize").click(function () {
    AddRow($("#SizeR").val(), $("#TolMin").val(), $("#TolMax").val());
    $("#SizeR").val("");
    $("#TolMin").val("");
    $("#TolMax").val("");
});
function insertRow(){}
function AddRow(SizeRange, Tolerancemin,Tolerancemax) {
    //Get the reference of the Table's thead element.
    var tBody = $("#WireDimTbl > thead> tr")[0];
    //Add Row.
    row = tBody.insertRow(-1);
    //Add Size cell.
    var cell = $(row.insertCell(-1));
    cell.html(SizeR);
    //Add TolMin cell.
    cell = $(row.insertCell(-1));
    cell.html(TolMin);
    //Add TolMax cell.
    cell = $(row.insertCell(-1));
    cell.html(TolMax);

}
$("#btnWdDelete").click(function () {
    var row = $("#SizeR").closest("tr");
    //Get the reference of the Table.
    var table = $("#WireDimTbl")[1];

    //Delete the Table row using it's Index.
    table.deleteRow(row[1].rowIndex);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td class='text-left'><strong>Standard Sizes & Tolerances</strong></td>
  <td>
    <input type='button' ID='btnASize'  value='AddSize' />
    <input type='button' ID='btnASizeR'  value='AddSizeRange' />
    <input type='button' ID='btnWdDelete'  value='Delete' />
    <table ID='WireDimTbl' class='table table-bordered'>
      <thead>
        <tr>
          <th class='text-center'>Size Range (mm)</th>
          <th class='text-center'>Tolerance (-)mm</th>
          <th class='text-center'>Tolerance (+) mm</th>
        </tr>
      </thead>
      <tr>
        <td class='text-center'>
          <input type='text' ID='SizeR' value='2.00' />
        </td>
        <td>
          <input type='text' ID='TolMin' value='1' />
        </td>
        <td>
          <input type='text' ID='TolMax' value='1' />
        </td>
      </tr>
    </table>
  </td>
</tr>

Answer 1

我准备这个样本以满足您的要求，尽管不是一个完整的解决方案。你必须自己编写一些代码。但这会给你一个很好的主意。

$('#btnAdd').click(function() {

  var textboxSize = "<input class='form-control' type='text' class='size 	range'>";
  var textboxTolerance = "<input class='form-control' type='text' class='tolerance'>";
  var markup = "<tr><td>" + textboxSize + "</td><td>" + textboxTolerance + "</td></tr>";
  $("#myTable tbody").append(markup);

});
$('#btnDelete').click(function() {

  $("#myTable tbody>tr:last").remove();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />

<input class="btn-primary" id="btnAdd" type="button" value="Add Row">
<input class="btn-primary" id="btnDelete" type="button" value="Delete">

<table class="table" id="myTable">
  <thead>
    <th>
      Size Range
    </th>
    <th>
      Tolerance
    </th>
  </thead>
  <tbody>

  </tbody>
</table>

Answer 2

我认为您的代码存在一些问题。

您在HTMLTableRowElement上调用insertRow。 insertRow是一种HTMLTableElement方法，因此我们需要确保在HTMLTableElement而不是HTMLTableRowElement上调用它。要解决这个问题，我们将选择表格。然后我们可以使用insertRow()。
您致电$(row.insertCell(-1))以插入单元格。这是无效的jQuery代码。 insertCell是HTMLTableRowElement的简单JS方法，因此我们需要确保在适当类型的元素上调用它。具体来说，我们将使用row.insertCell()，而不是$(row.insertCell(-1))。
删除功能包含类似的错误，但我会保留原来的错误，以便您可以自行更正。

$("#btnASize").click(function() {
  AddRow($("#SizeR").val(), $("#TolMin").val(), $("#TolMax").val());
  $("#SizeR").val("");
  $("#TolMin").val("");
  $("#TolMax").val("");
});

function AddRow(SizeRange, Tolerancemin, Tolerancemax) {
  //Get the reference of the Table's thead element.
  var tBody = $("#WireDimTbl")[0];
  //Add Row.
  row = tBody.insertRow(-1);
  //Add Size cell.
  var cell1 = row.insertCell(-1);
  $(cell1).text(SizeRange);
  //Add TolMin cell.
  var cell2 = row.insertCell(-1);
  $(cell2).text(Tolerancemin);
  //Add TolMax cell.
  var cell3 = row.insertCell(-1);
  $(cell3).text(Tolerancemax);

}
$("#btnWdDelete").click(function() {
  var row = $("#SizeR").closest("tr");
  //Get the reference of the Table.
  var table = $("#WireDimTbl")[1];

  //Delete the Table row using it's Index.
  table.deleteRow(row[1].rowIndex);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td class='text-left'><strong>Standard Sizes & Tolerances</strong></td>
  <td><input type='button' ID='btnASize' value='AddSize' /><input type='button' ID='btnASizeR' value='AddSizeRange' /><input type='button' ID='btnWdDelete' value='Delete' />
    <table id='WireDimTbl' class='table table-bordered'>
      <thead>
        <tr>
          <th class='text-center'>Size Range (mm)</th>
          <th class='text-center'>Tolerance (-)mm</th>
          <th class='text-center'>Tolerance (+) mm</th>
        </tr>
      </thead>
      <tr>
        <td class='text-center'><input type='text' ID='SizeR' value='2.00' /></td>
        <td><input type='text' ID='TolMin' value='1' /></td>
        <td><input type='text' ID='TolMax' value='1' /></td>
      </tr>
    </table>
  </td>
</tr>

尝试动态添加行但收到错误

2 个答案: