1. 程式人生 > >table標籤新增行和刪除行(Jquery)

table標籤新增行和刪除行(Jquery)

相關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));
        }
    }
}