【无标题】

ꪶⅈᧁꫝt..

已于 2022-09-28 13:48:35 修改

阅读量249

点赞数 1

文章标签： javascript

于 2022-09-27 21:25:28 首次发布

本文链接：https://blog.csdn.net/jiajunpo/article/details/127078984

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#tab{
				border: 1px solid red;
				border-collapse: collapse;
			}th,td{
				border: 1px solid red;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<table id="tab" width="200" border="" cellspacing="" cellpadding="">
			<thead>
				<tr>
					<th>学号</th>
					<th>姓名</th>
					<th>性别</th>
				</tr>
			</thead>
			
			<tbody>
				
			</tbody>
		</table>
		<script type="text/javascript">
			var data=[{
				stuid:1001,
				stuname:"张三",
				stusex:"男"
			},{
				stuid:1002,
				stuname:"李四",
				stusex:"男"
			},{
				stuid:1003,
				stuname:"小红",
				stusex:"女"
			}]
			window.onload=function(){
				for(var i=0;i<data.length;i++){
					var stuid=data[i].stuid
					var stuname=data[i].stuname
					var stusex=data[i].stusex
					//创建td
					var td_1=document.createElement("td")
					var td_2=document.createElement("td")
					var td_3=document.createElement("td")
					//将学号,姓名,性别添加到td中
					td_1.innerHTML=stuid
					td_2.innerHTML=stuname
					td_3.innerHTML=stusex
					//创建一个tr标签
					var tr= document.createElement("tr")
					
					//将td标签添加到tr中
					tr.appendChild(td_1)
					tr.appendChild(td_2)
					tr.appendChild(td_3)
					//将tr添加到tbody中
					document.querySelector("tbody").appendChild(tr)
				}
			}
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul{
				width: 300px;
				list-style: none;
			}
			ul li{
				border: 1px solid red;
				padding: 10px 20px;
				margin-bottom: 5px;
			}
		</style>
	</head>
	<body>
		<input type="text" name="txt" id="txt" value="" />
		<input type="button" name="" id="" value="添加节点" onclick="add()"/>&nbsp;
		<input type="button" name="" id="" value="删除节点" onclick="del()"/>&nbsp;
		<input type="button" name="" id="" value="修改节点" onclick="update()"/>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
	<script type="text/javascript">
		function add(){
			//先获取文本框的值
			var key=document.getElementById("txt").value
			//然后创建一个新的li标签
			var li=document.createElement("li")
			//将文本框中输入的内容放到li标签内
			li.innerHTML=key
			//将新创建的li标签添加到ul中,appendchild():给某个标签添加子元素
			document.querySelector("ul").appendChild(li)
		}
		function del(){
		 var ul_1=document.querySelector("ul")
		 //先获取到要删除的子元素
		 var li= ul_1.firstElementChild //firstElementChild:某元素中的第一个子元素
		 // var li= ul_1.lastElementChild //lastElementChild:某元素中的最后一个子元素
		 var li= document.querySelectorAll("li")[1]
		 ul_1.removeChild(li)//removeChild():删除的是子元素
		 // ul_1.remove()//remove():清空某元素中的所有子元素,包括元素本身
		}
		function update(){
			var ul_1= document.querySelector("ul")
			var li= ul_1.lastElementChild
			li.innerHTML="<a href='#'>百度 </a>"
		}
	</script>
	</body>
</html>