JQuery页面可增删表格

来源：互联网发布：好玩的页游知乎编辑：程序博客网时间：2024/06/06 04:28

遇到一个新的需求，要求在页面上可以增加和删除表格，记得在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>

效果图：

0 0