删除以编程方式添加到HTML表

时间：2015-12-22 08:11:21

标签： javascript jquery html asp.net razor

我正在使用.NET Framework 4.5，C＃和jQuery开发ASP.NET Web Api 2.2应用程序。

我在视图上有这个表：

<table id ="batchTable" class="order-list">
    <thead>
        <tr>
            <td>
                <h4>Product</h4>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td>
                <h4>Codes</span></h4>
            </td>
        </tr>
        <tr>
            <td>
                <h4>Label1</h4>
            </td>
            <td>
                <h4>Label2</h4>
            </td>
            <td>
                <h4>Label3</h4>
            </td>
            <td>
                <h4>Label4</h4>
            </td>
            <td>
                <h4>Label5</h4>
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="group">
                  <input type="text" 
                      name="BatchProducts[0].BatchName" 
                      id="BatchProducts[0].BatchName"
                      required />
                  @*<span class="highlight"></span>
                  <span class="bar"></span>
                  <label>Name</label>*@
                </div>
            </td>
            <td>
                <div class="group">
                  <input type="text" 
                      name="BatchProducts[0].BatchPO" 
                      id="BatchProducts[0].BatchPO"
                      required />
                  @*<span class="highlight"></span>
                  <span class="bar"></span>
                  <label>PO</label>*@
                </div>
            </td>
            <td>
                <div class="group">      
                  <input type="text" class="datepicker"
                      name="BatchProducts[0].MadeDate" 
                      id="BatchProducts[0].MadeDate"
                      required />
                  @*<span class="highlight"></span>
                  <span class="bar"></span>
                  <label>Made</label>*@
                </div>
            </td>
            <td>
                <div class="group">      
                  <input type="text" class="monthPicker"
                      name="BatchProducts[0].ValidateDate" 
                      id="BatchProducts[0].ValidateDate"
                      required />
                  @*<span class="highlight"></span>
                  <span class="bar"></span>
                  <label>Validate</label>*@
                </div>
            </td>
            <td>
                <div class="group">      
                  <input type="text" class="quantity"
                      name="BatchProducts[0].Quantity" 
                      id="BatchProducts[0].Quantity"
                      onkeydown='return (window.event.keyCode >= 48 && window.event.keyCode <= 57) || window.event.keyCode == 8 || window.event.keyCode == 46'
                      required />
                  @*<span class="highlight"></span>
                  <span class="bar"></span>
                  <label>Quantity</label>*@
                </div>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="5">
                <table>
                    <tr>
                        <td style="text-align: left;">
                            <input type="button" id="addrow" value="Add" />
                        </td>
                        <td>
                            <input type="button" class="ibtnDel"  value="Delete last row">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </tfoot>
</table>

当用户点击addRow按钮时，我使用jQuery动态添加新行，用户也可以在点击按钮ibtnDel时删除最后一行。

我的删除按钮有问题。这是它的javascript：

$("table.order-list").on("click", ".ibtnDel", function (event) {
    $('table.order-list').each(function () {
        if ($('table.order-list > tbody > tr', this).length > 0) {
            $('table.order-list tbody tr:last', this).remove();
        } else {
            $('tr:last', this).remove();
        }
    });

    counter -= 1
    $('#addrow').attr('disabled', false).prop('value', "Add");
});

但它不起作用，因为if ($('table.order-list > tbody > tr', this).length > 0)始终返回0.此代码会删除按钮tr和Add所在的Delete last row。

此代码：

if ($('tbody', this).length > 0) {
    $('tbody tr:last', this).remove();

当内部表格中的两个按钮Add和Delete last row不在内时，它们已经工作。

<tfoot>
    <tr>
        <td style="text-align: left;">
            <input type="button" id="addrow" value="Add" />
        </td>
        <td>
            <input type="button" class="ibtnDel"  value="Delete last row">
        </td>
    </tr>
</tfoot>

我怎样才能让它发挥作用？

JSFidle：https://jsfiddle.net/VansFannel/fa0z225s/12/这是我的第一个JSFidle，它不起作用。我不知道你是否可以编辑它。

4 个答案:

答案 0 :(得分：0)

尝试这样的事情...... 

$("table.order-list").on("click", ".ibtnDel", function (event) {
    if ($('table.order-list > tbody > tr') {
        $('table.order-list > tbody >tr:last-child').remove();
    } 
counter -= 1
$('#addrow').attr('disabled', false).prop('value', "Add");
});

答案 1 :(得分：0)

this中的$('table.order-list > tbody > tr', this)是要查看的内容。所以this中的$('table.order-list').each(function () {就是表格，您试图在其中寻找table.order-list - ＆gt; 

$("table.order-list").on("click", ".ibtnDel", function (event) {
   $('table.order-list').each(function () {
      // 'this' is now a table element with the class 'order-list'
      if ($('table.order-list > tbody > tr', this).length > 0) {
      // here you are looking for table.order-list inside 'this' which
      // is already that element.

所以，您可以将其更改为： - 

$("table.order-list").on("click", ".ibtnDel", function (event) {
    if ($('table.order-list > tbody > tr').length > 0) {
        $('table.order-list > tbody > tr:last').remove();
    }
});

FIDDLE

或者如果你有多个表： - 

$("table.order-list").on("click", ".ibtnDel", function (event) {
    var table = $(this).closest('table');
    if ($('tbody > tr', table).length > 0) {
        $('tbody > tr:last', table).remove();
    }
});

FIDDLE

<强>更新

如果您在表格中使用表格，那么您需要更具体地使用选择器。一种方法是使用>，这意味着直接/直接的孩子： - 

$("table.order-list").on("click", ".ibtnDel", function(event) {
  if ($('table.order-list > tbody > tr').length > 0) {
      $('table.order-list > tbody > tr:last').remove();
  }

  counter -= 1
  $('#addrow').attr('disabled', false).prop('value', "Añadir otro lote");
});

FIDDLE

答案 2 :(得分：0)

在您的代码中，此行$('table.order-list > tbody > tr', this).length在tr元素内找到父tbody table.order-list内this的元素，表示您在内部找到元素仅限表格。所以只需将代码更改为

$('tbody > tr', this).length

AND

$('tbody tr:last', this).remove()

答案 3 :(得分：0)

请检查一下，这可能有助于您将按钮行保留在最后位置

<table id="myTable" border="1">
  <tbody>
    <tr>
      <th>Table Header</th>
      <th>Table Header</th>
    </tr>
    <tr>
      <td>Table cell 1</td>
      <td>Table cell 2</td>
    </tr>
    <tr>
      <td>Table cell 3</td>
      <td>Table cell 4</td>
    </tr>
    <tr>
      <td><button type="button" class="ibtnAdd">Add Row</button></td>
      <td><button type="button" class="ibtnDel">Remove Row</button></td>
    </tr>
  </tbody>
</table>


<script>
$("table#myTable").on("click", ".ibtnDel", function (event) {
    var table = $(this).closest('table');
    var rowLen = $(table).find('tr').length-2;
    $('tbody > tr').eq($(table).find('tr').length-2).remove();
});
</script>

DEMO FIDDLE

相关问题
最新问题