jquery 之设置表格创建对象

最新推荐文章于 2020-05-29 11:22:16 发布

Luck Ye

最新推荐文章于 2020-05-29 11:22:16 发布

阅读量150

点赞数

本文链接：https://blog.csdn.net/tanliu1596/article/details/89037307

版权

使用jquery来动态创建表格和删除


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>js的学习</title>
<script type="text/javascript" src="js/jquery-3.0.0.js"></script>
<style type="text/css">
	.class1 {
		 background-color: black;
	
	}
	.class2{
		 background-color: white;
	
	}


</style>
<script type="text/javascript">
			//获取函数
			$(function (){
				var ps =$("p");
				//按钮的点击的事件
				$("#get").click(function(){
					
				for (var i = 0; i < ps.length; i++) {
					//获取内容
					console.log($(ps[i]).text())
					
				}	
					
				});
				//通过jquery获取值val
				//点检事件其实就是获取按钮的jQuery的对象或去点击的事件
				$("#getv").click(function(){
					//获取文本框的对象
					$("#v").val("傻B");
					
					
					
				});
				//获取属性
				$("#geta").click(function(){
					//获取想要获得属性的对象
					//alert($("#v").attr("type"));
					
					
					
				});
				//s设置属性jquery没有属性全是方法
				$("#setAtt").click(function(){
					if($(this).text()=="白")
						{	//获取当前的属性对象
						$(this).text("黑");
						$("#b").attr("class","class1");
						}else
							{
					//alert("进啦");
							$(this).text("白");
							$("#b").attr("class","class2");

								
							}
					
				
					
				});
				//制作表格
				//附加
				$("#append").click(function (){
					//制作td
					var td1=$("<td></td>").text("123");
					var td2=$("<td></td>").text("123");
					var td3=$("<td></td>").text("123");
					var td4=$("<td></td>").text("123");
					var td4=$("<td></td>").html("<a href='#' onclick ='delete1(this)'>删除</a>");
					var tr =$("<tr></tr>")
					 tr.append(td1);
					 tr.append(td2);
					 tr.append(td3);
						tr.append(td4);
					$("tbody").append(tr);
					
					
					
				});
				
				
				
				
			});
		function delete1 (th){
			th.parentNode.parentNode.parentNode.removeChild(th.parentNode.parentNode);
		
			
		}
</script>
</head>
<body id="b">
<p>第1段的内容</p>
<p>第2段的内容</p>
<p>第3段的内容</p>
<p>第4段的内容</p>
<input type="text" id="v">
<button id="get">点击获取内容</button>
<br>
<button id="getv">点击赋予内容</button>
<br>
<button id="geta">点击获取属性</button>
<br>
<button id="setAtt">设置属性</button>


<table border="1" cellspacing="0"><tbody></tbody></table>

<button id="append"  >增加表格</button>

</body>
</html>

Luck Ye

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 之设置表格创建对象

使用jquery来动态创建表格和删除123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778...
复制链接

扫一扫