页面如图:点击 + ,增加一行数据,点击- 删除一行数据。
<table id="protypeTable" style="table-layout:fixed" class="tab-1 tab-2" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th style="width: 20%;">科目代码</th>
<th style="width: 20%;">科目名称</th>
<th style="width: 20%;">财务科目代码</th>
<th style="width: 20%;">财务科目名称</th>
<th style="width: 10%;">费用类型</th>
<th>操作</th>
</tr>
<tr>
<th colspan="6" style="background: #b3d2fe;">
<span>点击添加科目</span>
<a>
<img src="/Content/erzhong/img/add.png" onclick="addTr(this)">
</a>
<a>
<img src="/Content/erzhong/img/reduce.png" onclick="delTr(this)">
</a>
</th>
</tr>
</tbody>
</table>
获取table最后一行 $("#tab tr:last")
获取table第一行 $("#tab tr").eq(0)
获取table倒数第二行 $("#tab tr").eq(-2)
//添加一行
function addTr() {
var $tr = $("#protypeTable tr").eq(-2);
var a = document.getElementById("protypeTable").rows.length - 2;
var type1 = $("#atype1").html(); //这里是select 的options值
var type2 = $("#atype2").html();
var type3 = $("#atype3").html();
var type4 = $("#atype4").html();
var code1 = "'accountcode'", code2 = "'accountname'", code3 = "'othercode'", code4 = "'othername'";
var trHtml = '<tr><td><select class="sel-1" id="accountcode' + a
+ '" οnchange="AccountChoose(' + code1 + ', ' + a
+ ')">' + type1 + '</select></td><td><select class="sel-1" id="accountname' + a
+ '" οnchange="AccountChoose(' + code2 +' ,' + a
+ ')">' + type2 + '</select></td><td><select class="sel-1" id="othercode' + a
+ '" οnchange="OtherChoose(' + code3 + ',' + a
+ ')">' + type3 + '</select></td><td><select class="sel-1" id="othername' + a
+ '" οnchange="OtherChoose(' + code4 + ',' + a
+ ')">' + type4 + '</select></td><td class="name" id="accounttype_' + a
+ '"></td><td id="' + (a + 1)
+ '"><a class="shangyi" οnclick="MoveUp(this)"></a><a class="xiayi" οnclick="MoveDown(this)"></a></td></tr>';
$tr.after(trHtml);
}
//删除一行
function delTr() {
var a = document.getElementById("protypeTable").rows.length;
if(a>2){
var $tr = $("#protypeTable tr").eq(-2);
$tr.remove();
}
}