jquery追加列表项

最新推荐文章于 2022-03-31 17:35:01 发布

Ason_haiyu

最新推荐文章于 2022-03-31 17:35:01 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/Ason_haiyu/article/details/79000915

版权

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
		</script>
		<script>
			$(document).ready(function() {

				$("#btn2").click(function() {
					$("ol").append("<li>追加列表项</li>");
				});
			});
			//定义删除的方法
			function del(a){
				var $td= $(a).parent();
				console.log($td);
				$td.remove();
			}
			
			//定义添加的方法
			function add() {
				//创建tr
				$tr = $("<tr></tr>");
				//向tr中添加元素
				$tr.append("<td><input type='checkbox' name='ck' /></td>");
				$tr.append("<td>张三</td>");
				$tr.append("<td>女</td>");
				$tr.append("<button οnclick='del(this)'>删除</button>")
				//获取table并添加
				$("table").append($tr);
			}
			
			function ckall(e){
				console.log("当前是否选择",e.checked);
				//改变每个学生对象的选择状态
				var es= $(":input[name='ck']");
				for(var i=0;i<es.length;i++){
					// = 赋值的作用
					es[i].checked=e.checked;  //e.checked姓名前的复选框的是否选择状态
					
				}
			}
			
		</script>
	</head>

	<body>
		<button id="btn2">添加列表项</button>
		<ol>
			<li>List item 1</li>
			<li>List item 2</li>
			<li>List item 3</li>
		</ol>
		<button id="btn3" οnclick="add()">添加tr</button>
		<button id="btn3" οnclick="add1()">添加tr到头</button>
		<table border="1px">
			<tr>
				<td><input type="checkbox" οnchange="ckall(this)" /></td>
				<td>姓名</td>
				<td>性别</td>
				<td>操作</td>
			</tr>
		</table>

	</body>

</html>

Ason_haiyu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery追加列表项

$(document).ready(function() { $("#btn2").click(function() { $("ol").append("追加列表项"); }); }); //定义删除的方法 function del(a){ var $td= $(a).parent(); console.log($td); $t
复制链接

扫一扫