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

最新推荐文章于 2021-06-22 10:40:28 发布

猫哈噗啦啦吖

最新推荐文章于 2021-06-22 10:40:28 发布

阅读量360

点赞数

分类专栏： JQuery 文章标签： JQuery

本文链接：https://blog.csdn.net/qq_26624661/article/details/52661989

版权

JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>