JS增删改查

最新推荐文章于 2023-02-08 01:04:35 发布

前端小涛

最新推荐文章于 2023-02-08 01:04:35 发布

阅读量1.4k

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_57130691/article/details/123496761

版权

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		书名搜索:<input class="txt" placeholder="请输入" />
		<table style="text-align: center;width: 660px;margin: 10px 0;" border="" cellspacing="3" cellpadding="10">
			<tr>
				<td>序号</td>
				<td>书名</td>
				<td>作者</td>
				<td>价格</td>
				<td>操作</td>
			</tr>
			<tr>
				<td class="xh">1</td>
				<td class="qwe">红楼梦</td>
				<td>曹雪芹</td>
				<td>30</td>
				<td class="del">
					<button onclick="remove(this)">删除</button>
				</td>
			</tr>
			<tr>
				<td class="xh">2</td>
				<td class="qwe">西游记</td>
				<td>曹雪芹</td>
				<td>30</td>
				<td class="del">
					<button onclick="remove(this)">删除</button>
				</td>
			</tr>
			<tr>
				<td class="xh">3</td>
				<td class="qwe">水浒传</td>
				<td>曹雪芹</td>
				<td>30</td>
				<td class="del">
					<button onclick="remove(this)">删除</button>
				</td>
			</tr>
			<tr>
				<td class="xh">4</td>
				<td class="qwe">三国演义</td>
				<td>曹雪芹</td>
				<td>30</td>
				<td class="del">
					<button onclick="remove(this)">删除</button>
				</td>
			</tr>

		</table>
		书名:<input type="text" placeholder="请输入" class="inp" /> 作者:
		<input type="text" placeholder="请输入" class="inp" /> 售价:
		<input type="text" placeholder="请输入" class="inp" />
		<button id="btn">新增</button><br /><br />
	</body>
	<script type="text/javascript">
		var obut = document.getElementById('btn');
		var otbody = document.getElementsByTagName('tbody')[0];
		var oinp = document.getElementsByClassName('inp');
		var otxt = document.getElementsByClassName('txt')[0];

		obut.onclick = function() {
			var hxo = document.getElementsByTagName('tr').length;
			//2获取input里面的内容
			var a = oinp[0].value;
			var b = oinp[1].value;
			var c = oinp[2].value;
			//创建td
			var td1 = document.createElement('td');
			var td2 = document.createElement('td');
			var td3 = document.createElement('td');
			var td4 = document.createElement('td');
			var td5 = document.createElement('td');
			//geitd赋值
			td1.innerHTML = hxo;
			td2.innerHTML = a;
			td2.setAttribute('class', 'qwe')
			td3.innerHTML = b;
			td4.innerHTML = c;
			//创建按钮
			var butt = '<button onclick="remove(this)">删除</button>';
			td5.innerHTML = butt;
			//吧tr放到otbody里面吧td放到tr里面
			var otr = document.createElement('tr');
			otr.appendChild(td1);
			otr.appendChild(td2);
			otr.appendChild(td3);
			otr.appendChild(td4);
			otr.appendChild(td5);
			otbody.appendChild(otr)
		}

		function remove(_this) {
			_this.parentNode.parentNode.parentNode.removeChild(_this.parentNode.parentNode)

		}
		var shuming = document.getElementsByClassName('qwe');

		otxt.onblur = function() {
			var vol = otxt.value;
			for(var i = 0; i < shuming.length; i++) {
				if(shuming[i].innerHTML.search(vol) == -1) {
					shuming[i].parentNode.style.display = 'none';

				} else {

				}

			}

		}
	</script>

</html>

前端小涛

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS增删改查

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 书名搜索:<input class="txt" placeholder="请输入" /> <table style="text-align: center;width: 660px;margi...
复制链接

扫一扫