table标签添加行和删除行(Jquery)

最新推荐文章于 2023-07-17 19:29:18 发布

key_zhaojd

最新推荐文章于 2023-07-17 19:29:18 发布

阅读量5.6k

点赞数

分类专栏： jQuery 文章标签： jquery table标签添加行删除行

本文链接：https://blog.csdn.net/zjdwhd/article/details/53786546

版权

jQuery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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