JQuery页面可增删表格

最新推荐文章于 2021-08-30 07:44:58 发布

原创最新推荐文章于 2021-08-30 07:44:58 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

项目开发同时被 2 个专栏收录

19 篇文章

订阅专栏

JavaScript

17 篇文章

订阅专栏

本文介绍如何利用jQuery实现网页上表格行的动态增加与删除功能，通过具体示例代码展示了如何根据用户操作更新表格内容，并保持数据的连续性和一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇到一个新的需求，要求在页面上可以增加和删除表格，记得在jQuery中有类似的东西，自己借鉴了下，下面是代码。

html代码：

<span style="font-family:Verdana;font-size:14px;">  <table id="tab" border="1" width="60%" align="center" style="margin-top:20px">
        <tr>
            <td width="20%">序号</td>
            <td >课程名称</td>
            <td>任课教师|</td>
            <td>教师编号</td>
            <td>操作</td>
       </tr>
    </table>

    <div style="border:2px; 
                border-color:#00CC00; 
                margin-left:20%;
                margin-top:20px">
        <input type="button" id="but" value="增?加¨®"/>
    </div>
</span>

js代码：

<span style="font-family:Verdana;font-size:14px;"><script type="text/javascript">
    $(document).ready(function(){
        //<tr/>居中
        $("#tab tr").attr("align","center");
        
        //增加<tr/>
        $("#but").click(function(){
            var _len = $("#tab tr").length;        
            $("#tab").append("<tr id="+_len+" align='center'>"
                                + "<td>" + _len + "</td>"
                                + "<td><input type='text' name='coursename" + _len + "' id='desc" + _len + "' /></td>"
                                + "<td><input type='text' name='coursecode" + _len + "' id='desc" + _len + "' /></td>"
                                +"<td><input type='text' name='teachercode"+_len+"' id='desc"+_len+"' /></td>"
                                +"<td><a href=\'#\' onclick=\'deltr("+_len+")\'>删¦?除y</a></td>"
                            +"</tr>");            
        })    
    })
   
    //删除<tr/>
    var deltr =function(index)
    {
        var _len = $("#tab tr").length;
        $("tr[id='"+index+"']").remove();//删除当前行
        for(var i=index+1,j=_len;i<j;i++)
        {
            var nextTxtVal = $("#desc"+i).val();
            $("tr[id=\'"+i+"\']")
                .replaceWith("<tr id="+(i-1)+" align='center'>"
                                + "<td>" + (i - 1) + "</td>"
                                + "<td><input type='text' name='coursename" + (i - 1) + "' value='" + nextTxtVal + "' id='desc" + (i - 1) + "'/></td>"
                                + "<td><input type='text' name='coursecode" + (i - 1) + "' value='" + nextTxtVal + "' id='desc" + (i - 1) + "'/></td>"
                                +"<td><input type='text' name='teachercode"+(i-1)+"' value='"+nextTxtVal+"' id='desc"+(i-1)+"'/></td>"
                                +"<td><a href=\'#\' onclick=\'deltr("+(i-1)+")\'>删¦?除y</a></td>"
                            +"</tr>");
        }    
        
    }
</script>
</span>

效果图：