使用JQery编写表格的动态增删

来源:互联网 发布:联想电脑怎么卸载软件 编辑:程序博客网 时间:2024/06/06 00:43
<!doctype html><html><head><meta charset="utf-8"><title>动态增删表格</title><script src="jquery-2.1.1.js"></script><script>function addRow(){var table=$("#myTable");var str="<tr><td><input type='checkbox' /></td><td><input type='text' /></td></tr>";table.append(str);}function delRow(){var trs=$("#myTable tr");var isDel;for(var i=1;i<trs.length;i++){isDel=trs.eq(i).children().eq(0).children();if(isDel.is(":checked")){trs.eq(i).remove();}}}</script></head><body><div>        <table id="myTable" border="1px" align="center">            <tr>                <td>选择</td>                <td>内容</td>            </tr>            <tr>                <td><input type="checkbox" /></td>                <td><input type="text" /></td>            </tr>        </table>    </div>    <div align="center" style="margin-top:10px">        <button onClick="addRow()">增加</button>    <button onClick="delRow()">删除</button>    </div></body></html>

0 0
原创粉丝点击