动态table 动态增加删除行

来源：互联网发布：单片机为什么需要复位编辑：程序博客网时间：2024/05/16 06:02
<html><head><title></title><script src="js/jquery-1.9.1.min.js"></script><script>var row_count = 2;    //因为页面已经有一行了，为了和谐，所以直接从2开始。详细见picfunction addNewRow() {            var table1 = $("#time_table");            var firstTr = table1.find("tbody>tr:first");            var row = $("<tr></tr>");            var td = $("<td style='text-align: center;'><input type='text' class='span1'  id='loginid' value=''/></td><td style='text-align: center;'><input type='text' class='span1' maxlength='2' id='password' value=''/></td><td style='text-align: center;'><input type='text' class='span1' id='remark'  value=''/></td><td style='text-align: center;'><input value='删除' type='button' id='" + row_count + "' onclick='del(" + row_count + ")'/></td>");            row.append(td);            table1.append(row);            row_count++;}        function del(e) {            //获取选中的复选框，然后循环遍历删除            var ckbs = $("#"+e+"");            ckbs.each(function() {                $(this).parent().parent().remove();            });        }</script></head><body><div id="rightcontent"><form id="advForm">                    <table id="time_table" class="table table-bordered">                        <tbody>                            <tr>                                <th style="text-align: center;">登录账号</th>                                <th style="text-align: center;">登录密码</th>                                <th style="text-align: center;">备注说明</th>                                <th style="text-align: center;"><input type='button' value='添加账号' onclick="addNewRow()"/></th>                            </tr>                                                    </tbody>                    </table> </form></div></body></html>
0 0