json实现表格列表的动态创建与绑定

最新推荐文章于 2022-03-19 21:39:33 发布

才疏学浅的小缘同学

最新推荐文章于 2022-03-19 21:39:33 发布

阅读量948

点赞数 1

分类专栏： JavaScript学习文章标签： json html html5

本文链接：https://blog.csdn.net/qq_44790505/article/details/120223917

版权

JavaScript学习专栏收录该内容

6 篇文章 1 订阅

订阅专栏

首先设置好表格的表头，并为表格及列表设置id。

<div id="dv">
		<table id="tb">
			<caption>英雄列表</caption>
			<tr>
				<td>姓名</td>
				<td>性别</td>
				<td>定位</td>
				<td>操作</td>
			</tr>
		</table>
</div>

接着给表格设置CSS样式属性

    #tb{
		width: 40%;
		border: solid 1px cornflowerblue;
		margin: 10px auto;
	}

	td{
		border: solid 1px cornflowerblue;
	}

最后编写JavaScript方法

//删除表格中被点击的超链接所在的行
	function deleteRow(a){
		//设置弹框,确认用户选择
		var ok = confirm("确定要删除吗？"); //确认:true 取消：false
		if(!ok){
			return false; //取消操作
		}
		
		var tb = document.getElementById("tb");
		var rowIndex = a.parentNode.parentNode.rowIndex;//获取当前删除行的行索引
		tb.deleteRow(rowIndex);//调用方法删除指定行索引的行对象
	}
	//初始化数据表格
	function initialTab(){
		var tb = document.getElementById("tb");
		var hero = [
			{'name':'亚索','gender':'男','occupation':'战士'},
			{'name':'卡兹克','gender':'男','occupation':'刺客'},
			{'name':'泽拉斯','gender':'男','occupation':'法师'},
			{'name':'索拉卡','gender':'女','occupation':'辅助'}
		];
		//增强for循环
		for(var i in hero){
			var row = tb.rows[0].cloneNode(true);//深度复制tr对象
			row.cells[0].innerHTML = hero[i].name;
		    row.cells[1].innerHTML = hero[i].gender;
			row.cells[2].innerHTML = hero[i].occupation;
			row.cells[3].innerHTML = "<a href = '#' onclick='deleteRow(this)'>删除</a>";
			tb.appendChild(row); //在表格中添加复制的新行
		}
	}
	
	//页面加载
	window.onload = function(){
		initialTab();
	};

执行结果如下：

完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>英雄列表</title>
	</head>
	<style type="text/css">
	#tb{
		width: 40%;
		border: solid 1px cornflowerblue;
		margin: 10px auto;
	}
	td{
		border: solid 1px cornflowerblue;
	}
	</style>
	<script type="text/javascript">
	
	//删除表格中被点击的超链接所在的行
	function deleteRow(a){
		//设置弹框,确认用户选择
		var ok = confirm("确定要删除吗？"); //确认:true 取消：false
		if(!ok){
			return false; //取消操作
		}
		
		var tb = document.getElementById("tb");
		var rowIndex = a.parentNode.parentNode.rowIndex;//获取当前删除行的行索引
		tb.deleteRow(rowIndex);//调用方法删除指定行索引的行对象
	}
	//初始化数据表格
	function initialTab(){
		var tb = document.getElementById("tb");
		var hero = [
			{'name':'亚索','gender':'男','occupation':'战士'},
			{'name':'卡兹克','gender':'男','occupation':'刺客'},
			{'name':'泽拉斯','gender':'男','occupation':'法师'},
			{'name':'索拉卡','gender':'女','occupation':'辅助'}
		];
		//增强for循环
		for(var i in hero){
			var row = tb.rows[0].cloneNode(true);//深度复制tr对象
			row.cells[0].innerHTML = hero[i].name;
		    row.cells[1].innerHTML = hero[i].gender;
			row.cells[2].innerHTML = hero[i].occupation;
			row.cells[3].innerHTML = "<a href = '#' onclick='deleteRow(this)'>删除</a>";
			tb.appendChild(row); //在表格中添加复制的新行
		}
	}
	
	//页面加载
	window.onload = function(){
		initialTab();
	};
	</script>
	<body>
		<div id="dv">
			<table id="tb">
				<caption>英雄列表</caption>
				<tr>
					<td>姓名</td>
					<td>性别</td>
					<td>定位</td>
					<td>操作</td>
				</tr>
			</table>
		</div>
	</body>
</html>

才疏学浅的小缘同学

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
json实现表格列表的动态创建与绑定

首先设置好表格的表头，并为表格及列表设置id。<div id="dv"> <table id="tb"> <caption>英雄列表</caption> <tr> <td>姓名</td> <td>性别</td> <td>定位</td> <td>操作</td> </tr> <
复制链接

扫一扫