table標籤新增行和刪除行(Jquery)
阿新 • • 發佈:2019-01-25
相關jsp程式碼,可參看:
<tr height=10>
<td colspan=3 align="right">
<input id="additem" type="button" name="saveitem" value="新增選項" onClick="insertRows()">
</td>
</tr>
------------------------------------------------------
<table cellspacing="0" cellpadding="1" rules="all" id="dictTbl">
<tr>
<td id="bianhao" class="ta_01" align="center">編號</td>
<td id="mingcheng" class="ta_01" align="center" width="60%">名稱</td>
<td id="shanchu" class="ta_01" align="center">刪除</td>
</tr>
<tr>
<td class="ta_01" align="center" width="20%">1</td>
<td class="ta_01" align="center" width="60%">
<input name="itemname" type="text" size="45" maxlength="25">
</td>
<td class="ta_01" align="center" width="20%"></td>
</tr>
</table>
新增和刪除行的js方法:
function insertRows() {
var tb1 = $("#dictTbl");
var tempRow = $("#dictTbl tr").size();
var $tdNum = $("<td align='center'></td>");
$tdNum.html(tempRow);
var $tdName = $("<td align='center'></td>");
$tdName.html("<input id='"+tempRow+"' name='itemname' type='text' size='45' maxlenth='25'>");
var $tdDel = $("<td align='center'></td>");
$tdDel.html("<a href='#' onclick='delTableRow("+tempRow+")'><img src=../images/delete.gif width=15 height=14 border=0 style=cursor:hand></a>");
var $tr = $("<tr></tr>");
$tr.append($tdNum);
$tr.append($tdName);
$tr.append($tdDel);
tb1.append($tr);
}
function delTableRow(rowNum) {
var tb1 = $("#dictTbl");
var tempRow = $("#dictTbl tr").size();
if (tempRow > rowNum) {
$("#" + rowNum).parent().parent().remove();
// 加1表示尋找下一個id,目的是將後面tr的格式向上移動
for (i = (parseInt(rowNum) + 1); i < tempRow; i++) {
// 將i-1的值賦值給編號
$("#" + i).parent().prev().html(i - 1);
// 將i-1的值賦值給超連結的刪除
$("#" + i).parent().next().html("<a href='#' onclick='delTableRow("+ (i - 1)+ ")'><img src=../images/delete.gif width=15 height=14 border=0 style=cursor:hand></a>");//
// 將i-1的值賦值給文字框的id,用於刪除
$("#" + i).attr("id", (i - 1));
}
}
}