[英]How to avoid appending rest of the <td>s except first one from a new <tr> appended to the <tbody> using jQuery?
我有一个HTML表格。 实际上可能有许多这样的表存在不同的ID。 我在使用jQuery单击按钮时附加一个新表行。 该表有六列。 页面加载时存在的表的第一行包含所有六列中的HTML元素。 下一行包含第一列中的Add按钮,其他五个<td></td>
当我点击这个Add按钮时,我想追加一个新行,它只包含带有HTML元素的第一个<td>
和其他五个<td></td>
不应显示<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=""> 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">×</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>
。
尝试创建新行,而不是clone
现有行。 我相信jQuery可以像$("<tr>")
那样做,但“更合适”的方法是document.createElement('tr')
。
然后你可以放入你想要的任何细胞。 然而,应该注意的是,浏览器将尝试规范化表格(即确保它在每一行中具有相同数量的列),因此如果您的单元格数量错误,结果可能会发生不可预测的变化。
在语句tbody.append(new_row);
之后立即将此行添加到jQuery函数中tbody.append(new_row);
$(new_row).children('td').not('td:eq(0)').remove();
希望它会对你有所帮助。
您可以使用以下内容在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来实现这一点。 如果你每次都从头创建新行,而不是克隆它,那将会更简单。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.