24、DOM的高级应用1-------表格的动态删除和添加行的操作

最新推荐文章于 2022-12-09 19:01:31 发布

Bwz_Learning

最新推荐文章于 2022-12-09 19:01:31 发布

阅读量714

点赞数 1

分类专栏： JavaScript_Bak 文章标签： JavaScript Table 动态的添加table的row

本文链接：https://blog.csdn.net/zbw18297786698/article/details/51685767

版权

JavaScript_Bak 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

1、DOM的高级应用1-------表格的动态删除和添加行的操作

2、注意oTab.tBodies[0].rows[0].cells[1].innerHTML的使用形式

3、代码的实现

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>表格的高级应用</title>

		<script>
			window.onload = function() {
				var oTab = document.getElementById('tab1');
				//alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[2].getElementsByTagName('td')[1].innerHTML);
				//1、在表格里面,获取表格的快捷方式
				//alert(oTab.tBodies[0].rows[0].cells[1].innerHTML);
				//2、如果不加tBodies,会将thead里面的列，也算进来
				//alert(oTab.rows[0].cells[1].innerHTML);
				//3、动态的增加一行
				var oBtn = document.getElementById('btn1');
				var oTxt = document.getElementById("text1");
				var iNowId = oTab.tBodies[0].rows.length + 1;
				oBtn.onclick = function() {
					//ID那一列
					var oTr = document.createElement('tr');
					var oTd = null;
					oTd = document.createElement('td');
					oTd.innerHTML = iNowId++;
					oTr.appendChild(oTd);
					//姓名那一列
					oTd = document.createElement('td');
					oTd.innerHTML = oTxt.value;
					oTr.appendChild(oTd);
					//操作那一列
					oTd = document.createElement('td');
					//4、删除一行
					//4.1该删除添加按钮
					oTd.innerHTML = '<a href="javascript:void(0)" >删除</a>';
					oTr.appendChild(oTd);
					//4.2 添加删除事件
					oTd.getElementsByTagName('a')[0].onclick = function() {
							//调用table的removeremoveChild()方法，完成当前行的删除操作
							oTab.tBodies[0].removeChild(this.parentNode.parentNode);
						}
						//添加到tBodies里面
					oTab.tBodies[0].appendChild(oTr);
				}
			};
		</script>
	</head>

	<body>
		<!--用于增加元素-->
		<input id="text1" type="text" />
		<input id="btn1" type="button" value="添加" />
		<!--表格-->
		<table id="tab1" border="1" width="400">
			<thead>
				<td>ID</td>
				<td>姓名</td>
				<td>操作</td>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>Blue</td>
					<td></td>
				</tr>
				<tr>
					<td>2</td>
					<td>Leo</td>
					<td></td>
				</tr>
				<tr>
					<td>3</td>
					<td>莫莫</td>
					<td></td>
				</tr>
				<tr>
					<td>4</td>
					<td>aaa</td>
					<td></td>
				</tr>
				<tr>
					<td>5</td>
					<td>bbb</td>
					<td></td>
				</tr>
				<tr>
					<td>6</td>
					<td>ccc</td>
					<td></td>
				</tr>
			</tbody>
		</table>
	</body>

</html>

Bwz_Learning

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
24、DOM的高级应用1-------表格的动态删除和添加行的操作

1、DOM的高级应用1-------表格的动态删除和添加行的操作2、注意oTab.tBodies[0].rows[0].cells[1].innerHTML的使用形式3、代码的实现表格的高级应用 window.onload = function() { var oTab = document.getElementById('tab1');
复制链接

扫一扫