基于Jquery的表格的动态增加删除

来源：互联网发布：it服务外包最大编辑：程序博客网时间：2024/05/19 16:28

有时候工作需要就简单记录，其实还是比较简单的，只是简单的JQuery的函数应用。

<!DOCTYPE html>        <html>        <head>            <meta charset="utf-8">            <title>AddorDeleteTable</title>            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>        </head>        <body>            <input type="text" name="context" id="context">            <button type="button" onclick="addTable()">ADD</button>            <table id="baseTable" border="1" cellpadding="2" cellspacing="0" >                <tr>                        <th>Number</th>                        <th>Content</th>                        <th>Operation</th>                </tr>            <table>        </body>        <script>                function addTable(){                        var baseTable=$("#baseTable");                        //获取序号                        var no=baseTable.find("tr:last td:first").html();                        if(no==null){                            no=0;                        }                        no=Number(no)+Number(1);                        //获取输入内容                        var context=$("#context").val();                        //增加一行                        var tr="<tr>"                                +"<td>"+no+"</td>"                                +"<td>"+context+"</td>"                                +"<td><button type='button' onclick='delTable(this)'>DEL</button></td>"                                +"</tr>";                            baseTable.append(tr);                            //清空输入框                            $("#context").val("");                    }                    function  delTable(obj){                        //alert(obj);                        $(obj).parent().parent().remove();                    }        </script>        </html>

效果

这里写图片描述

阅读全文

0 0