自定义表格的添加行/删除行
1、创建好表头,定义好列名,以及删除控件的列,添加行的按钮
<div class="row col-lg-12 col-md-12" style="margin-left:2px;">
<button id="addrow">添加行</button>
<table class="table"; id="tables" "addRow()">
<tr style="background:#2179dc;color:#f1ecec;">
<th>序号</th>
<th>列1</th>
<th>列2</th>
<th>删除</th>
</tr>
</table>
</div>
1
2
3
4
5
6
7
8
9
10
11
2、创建完成之后,就要写JavaScript添加行的代码了
var ssd=0;
function addRow() { //往表格添加行
ssd++;
$("#tanles").append("<tr><td>" + ssd +
"</td><td><input type='text'/></td><td><input type='text'/></td> " +
"<td><span 'DeleteRow(this)' class='glyphicon glyphicon-remove'></span></td></tr>");
}
function DeleteRow(TS) { //删除表格行
var tr = $(TS).parent().eq(0).parent(0).remove();
}
1
2
3
4
5
6
7
8
9
10
这个过程是通过声明一个自增变量,然后写一个方法往表格“my Table”里追加行,每追加一行,方法调用一次,序号就增加1;追加的行列数要等于表头的列数;
第二部就是写一个删除当前行的方法,“Remove(this)”在行尾的一个button控件调用这个控件,
$(ts).parent(0).parent(0).remove (); 这句代码意思是获取当前标签的第一个父项的第一个父项,然后移除它,也就是移除当前行
如图所示
自定义表格的控制就完成了,想删除哪行就删除哪行,这个方法仍纯在不足,就是序号;即便你删除了所有行然后再添加行,序号会根据上一次添加最后一次的序号继续递增不会从零开始;暂时还没有研究出解决方法。
|
|