0

我有一个 HTML 表格。实际上可以有许多这样的表存在不同的 ID。我正在使用 jQuery 单击按钮添加一个新的表格行。该表有六列。页面加载时出现的表格的第一行包含所有六列中的 HTML 元素。下一行在第一列中包含添加按钮和其他五个<td></td>当我单击此添加按钮时，我想添加一个新行，该行将仅包含第一个<td>带有它的 HTML 元素，其他五个<td></td>不应该显示。如何做到这一点？我的HTML如下：

<table id="blacklistgrid_1"  class="table table-bordered table-hover table-striped">
  <thead>
    <tr>
      <th style="vertical-align:middle">Products</th>
      <th style="vertical-align:middle">Pack Of</th>
      <th style="vertical-align:middle">Quantity</th>
      <th style="vertical-align:middle">Volume</th>
      <th style="vertical-align:middle">Unit</th>
      <th style="vertical-align:middle">Rebate Amount</th>
    </tr>
  </thead>
  <tbody class="apnd-test">
    <tr id="reb1_1">
      <td>
        <div class="btn-group">
          <select name="product_id_1[1]" id="product_id_1_1" class="form-control prod_list">
            <option value=""  selected='selected'>Select Product</option>
          </select>
        </div>
      </td>
      <td>
        <input type="text" name="pack[1]" id="pack_1" value="" class="form-control" size="8"/>
      </td>
      <td>
        <input type="text" name="quantity[1]" id="quantity_1" value="" class="form-control" size="8"/>
      </td>
      <td>
        <input type="text" name="volume[1]" id="volume_1" value="" class="form-control" size="8"/>
      </td>
      <td>
        <div class="btn-group">
          <select name="units[1]" id="units_1" class="form-control">
            <option value=""  selected='selected'>Select Unit</option>
            <option value="5" >Microsecond</option>
            <option value="7" >oz</option>
            <option value="9" >ml</option>
            <option value="10" >L</option>
            <option value="12" >gms</option>
          </select>
        </div>
      </td>
      <td>
        <input type="text" name="amount[1]" id="amount_1" value="" class="form-control" size="9"/>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr id="reb1_2">
      <td><button style="float:right; margin-bottom: 20px" class="products" type="button" class="btn btn-default" onclick="">&nbsp;Add</button></td>
      <td colspan="5"></td>
    </tr>
  </tfoot>                                           
</table>

我编写的追加新行的 jQuery 函数如下：

$(function () {
//function to create new row in add rebate by product grid 
  $(document).delegate('.products','click',function (e) {
    var table_id = $(this).closest('table').attr('id');
    var no = table_id.match(/\d+/)[0];            
    var first_row = $('#'+table_id).find('tbody tr:first').attr('id');
    var new_row = $('#'+first_row).clone();
    var tbody = $('#' + table_id + ' tbody');
    var n = $('tr', tbody).length  + 1;
    new_row.attr('id', 'reb' + no +'_'+ n);    

    $(':input', new_row).not('.prod_list').remove();
    $('select', new_row).attr('name','product_id_'+no+'['+n+']');
    $('select', new_row).attr('id','product_id_'+no+'_'+n);
    $('<button style="color:#C00; opacity: 2;margin-top: 6px;" type="button" class="close delete" data-dismiss="alert" aria-hidden="true">&times;</button>').appendTo( $(new_row.find('td:first')) );
    tbody.append(new_row);

    //function to delete row from add rebate by product grid 
    $('.delete').on('click', deleteRow);      
  });  
});

我能够在页面上存在的每个表中成功地附加新表行。没有问题。我想要解决的问题是其余的<td></td>不应显示在新添加的行中。由于这些空白<td></td>，表格对用户来说似乎是不完整的。那里应该只显示第一列。如何做到这一点？有人可以在这方面帮助我吗？我正在使用 jquery-1.9.1.min.js。
我的jsFiddle。

在 jsFiddle 中，表格边框不显示，但在我的工作实例中显示。我不想显示那些空白<td></td>s。

在此处输入图像描述

4

3 回答 3

1

在语句之后将此行添加到您的 jQuery 函数tbody.append(new_row);

$(new_row).children('td').not('td:eq(0)').remove();

希望它会帮助你。

于 2014-05-09T15:53:41.703 回答
1

尝试创建一个新行，而不是clone现有行。我相信jQuery 可以做到这一点$("<tr>")，但“更合适”的方式是document.createElement('tr').

然后，您可以放入任何您想要的单元格。然而，应该注意的是，浏览器会尝试对表格进行规范化（即确保每行中的列数相同），因此如果单元格数量错误，结果可能会发生不可预测的变化。

于 2014-05-09T14:10:40.693 回答
0

您可能可以在 CSS 中使用类似以下的内容来完成此操作：

.last td.not_first {
     display: none;   
}

然后你只需要像这样向你的 tr 和 tds 添加类：

<table>
    <tr class="not_last"><td>First Col</td><td class="not_first">Sec Col</td><td class="not_first">Third Col</td></tr>
    <tr class="not_last"><td>First Col</td><td class="not_first">Sec Col</td><td class="not_first">Third Col</td></tr>
    <tr class="last"><td>First Col</td><td class="not_first">Sec Col</td><td class="not_first">Third Col</td></tr>
</table>

每当您添加新行时，您都需要对类进行一些杂耍，但您可以使用 addClass 和 toggleClass 使这变得非常容易。如果您每次都从头开始创建新行，而不是克隆它，它会更简单。

于 2014-05-09T14:33:37.590 回答