DOM js and jQuery实现表格元素的删除添加

最新推荐文章于 2023-03-10 15:07:49 发布

小红帽与灰太狼

最新推荐文章于 2023-03-10 15:07:49 发布

阅读量219

点赞数 1

分类专栏： JS 文章标签： DOM js实现表格添加与删除 js DOM表格

本文链接：https://blog.csdn.net/weixin_42277719/article/details/103170883

版权

JS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

DOM js实现表格元素的删除添加

今天老师让不用jQuery，让使用原始的js写出来的代码
体现严格的逻辑性和耐性的时刻到了
图片样式

实现表格的删除插入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="2" align="center">
			<tr id="title">
				<th>商品名称</th>
				<th>商品价格</th>
				<th>操作</th>
			</tr>
			<tr  id="first">
				<td>iPhone</td>
				<td>8888</td>
				<td>
					<button>删除</button>
				</td>
			</tr>
			<tr id="second">
				<td>vivo</td>
				<td>3000</td>
				<td>
					<button>删除</button>
				</td>
			</tr>
			<tr id="last"><td colspan="3">
				商品名称:
				<input type="text" name="goodsname" id="goodsname" />
				商品价格:
				<input type="text" name="goodsprice" id="goodsprice" />
				
			</td></tr>
			<tr><td colspan="3">
				<center><button name="addd"  onclick="cli()" class="add">添加订单</button></center>
		</td></tr>
		</table>

		
		<script type="text/javascript">
			function cli(){
				var goodsname=document.getElementById('goodsname').value;
				var goodsprice=document.getElementById('goodsprice').value;
				var gname=document.createTextNode(goodsname);
				var gprice=document.createTextNode(goodsprice);
				var dell=document.createTextNode('删除')
				var tr=document.createElement('tr');
				var td1=document.createElement('td');
				var td2=document.createElement('td');
				var td3=document.createElement('td');
				var bt=document.createElement('button');
				td1.appendChild(gname);
				td2.appendChild(gprice);
				bt.appendChild(dell);
				td3.appendChild(bt);
				tr.appendChild(td1);
				tr.appendChild(td2);
				tr.appendChild(td3);
				var last=document.getElementById('last');
				last.parentNode.insertBefore(tr,last);
				var a=document.getElementsByTagName('button');
				for (var i=0;i<a.length;i++) {				
					//document.getElementsByTagName('button')[i].setAttribute('class','delec');
					document.getElementsByTagName('button')[i].setAttribute('onclick','del(this)');
				}
				//document.getElementsByName('addd')[0].setAttribute('class','ad');
				document.getElementsByName('addd')[0].setAttribute('onclick','cli()');
			}
			
			function del(th){
				var tr=th.parentNode.parentNode;
				tr.parentNode.removeChild(tr);
			}
			
		</script>
	</body>
</html>

马飞同学的代码：

<script type="text/javascript">
			function del(th){
				var de=document.getElementById("del").parentNode;
				de.parentNode.remove("tr");
			}
			
			
			function add(){
				var tr=document.createElement("tr");
				var td1=document.createElement("td");
                var td2=document.createElement("td");
                var td3=document.createElement("td");
                var btn=document.createElement("button");
                
                
                var input1=document.getElementById("name").value
                var input2=document.getElementById("price").value
                
                
                var tx1=document.createTextNode(input1);
                var tx2=document.createTextNode(input2);
                var tx3=document.createTextNode("删除");
                
                td1.appendChild(tx1);
                td2.appendChild(tx2);
                btn.appendChild(tx3);
                btn.setAttribute("onclick","del(this)");
                
                td3.appendChild(btn);
   
                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);
                
                
                var la = document.getElementById("last");
				la.parentNode.insertBefore(tr, la);
                
			}
		</script>

我觉得这道题很有挑战性，逻辑性很强如按我写的话；
希望大家勇于讨论；
写于2019/11/20晚
在这里插入图片描述

jQuery方法

<!DOCTYPE html>
<html>

	<head id="Head1">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style>
			body {
				font-size: 12px;
				background-color: bisque;
			}
			
			form {
				margin: auto;
				width: 30%;
			}
			
			table {
				margin: auto;
				margin-top: 50px;
				width: 360px;
				border-collapse: collapse;
			}
			
			table tr th,
			td {
				border: solid 1px #666;
				text-align: center;
			}
			
			table tr td img {
				border: solid 1px #ccc;
				padding: 3px;
				width: 42px;
				height: 60px;
				cursor: hand
			}
			
			table tr td span {
				float: left;
				padding-left: 12px;
			}
			
			table tr th {
				background-color: #ccc;
				height: 32px
			}
		</style>

	</head>

	<body>
		<form id="info" action="#">
			<fieldset>
				<legend>球员资料</legend>
				<ol>
					<li>
						<label for="num">号码：</label>
						<input id="num" name="num" type="text" placeholder="请输球员号码" required autofocus>
					</li>
					<li>
						<label for=name>姓名：</label>
						<input id="name" name="name" type="text" placeholder="请输球员姓名" required>
					</li>
					<li>
						<label for=team>球队：</label>
						<input id="team" name="team" type="text" placeholder="请输球员球队">
					</li>
					<li>
						<label for=age>年龄：</label>
						<input id="age" name="age" type="text" placeholder="请输入球员年龄" required>
					</li>

				</ol>
			</fieldset>
		</form>

		<table id="tab">
			<tr>
				<th>选项</th>
				<th>号码</th>
				<th>姓名</th>
				<th>球队</th>
				<th>年龄</th>
			</tr>
			<tr id="0">
				<td><input id="Checkbox1" type="checkbox" value="0" /></td>
				<td>30</td>
				<td>库里</td>
				<td>勇士</td>
				<td>26</td>
			</tr>
			<tr id="1">
				<td><input id="Checkbox2" type="checkbox" value="1" /></td>
				<td>24</td>
				<td>kobe</td>
				<td>湖人</td>
				<td>38</td>
			</tr>
			<tr id="2">
				<td><input id="Checkbox3" type="checkbox" value="2" /></td>
				<td>3</td>
				<td>马布里</td>
				<td>北京</td>
				<td>38</td>
			</tr>
		</table>
		<table>
			<tr>
				<td style="text-align:left;height:28px">
					<span><input id="bt"     type="checkbox"  onclick="sele()"/>全选</span>
					<span><input id="bt1"    type="button" value="增加" class="btn"/></span>
					<span><input id="bt2"    type="button" value="删除" class="btn"/></span>
				</td>
			</tr>
		</table>

<script type="text/javascript">
	$("#bt").click(function() {
				if(this.checked) {
					$("#tab input").each(function() {
						this.checked = true;
					});
				} else {
					$("#tab input").each(function() {
						this.checked = false;
					});
				}
			});
	$("#bt1").click(function() {
				var num = $("#num").val();
				var name = $("#name").val();
				var team = $("#team").val();
				var age = $("#age").val();
				var len = $("#tab tr[id]").length;
				var tr = $('<tr id="' + len + '"><td><input id="Checkbox' + (len + 1) + '" type="checkbox" value="' + len + '"/></td><td>' + num + '</td><td>' + name + '</td><td>' + team + '</td><td>' + age + '</td></tr>');
				$("#tab").append(tr);
				// 清空
				$("#info").get(0).reset();
			});		
	$("#bt2").click(function() {
				$("#tab input:checked").each(function() {
					$(this).parent().parent().remove();
				});
			});		
</script>
</body>

</html>

写于2019/11/25晚
学习完jQuery感觉用jQuery写起来好用多了
希望两者结合更加给力

小红帽与灰太狼

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM js and jQuery实现表格元素的删除添加

DOM js实现表格元素的删除添加今天老师让不用jQuery，让使用原始的js写出来的代码体现严格的逻辑性和耐性的时刻到了实现表格的删除插入<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> ...
复制链接

扫一扫