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

Question

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

$("#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

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

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

$("#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>