JS动态生成表格

最新推荐文章于 2024-05-03 16:02:30 发布

妍之有礼

最新推荐文章于 2024-05-03 16:02:30 发布

阅读量245

点赞数

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

本文链接：https://blog.csdn.net/cc_020216/article/details/132222972

版权

1.HTML 结构

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./css/index.css">
	</head>
	<body>
		<table>
			<thead>
				<th><input type="checkbox" name="" id="MainCheck" onclick="SelectAll()"><span class="check_txt">全选</span></th>
				<th>发件人</th>
				<th>邮箱名称</th>
				<th>邮箱附属信息</th>
			</thead>
			<tbody class="t_tbody">

			</tbody>
			<tfoot>
				<tr>
					<td><input type="button" value="全选" onclick="btnSelectAll()"></td>
					<td><input type="button" value="取消全选" onclick="btnDeselectAll()"></td>
					<td><input type="button" value="反选" onclick="btnInvert()"></td>
					<td><input type="button" value="删除所有附件" onclick="btnDelete()"></td>
				</tr>
			</tfoot>
		</table>
	</body>
	<script type="text/javascript" src="./js/index.js"></script>
</html>

2.CSS 样式

代码如下：

table {
	width: 800px;
	margin: auto;
	margin-top: 50px;
	border: 3px solid blue;
	border-collapse: collapse;
}

th,
td {
	height: 50px;
	margin-top: 100px;
	border: 3px solid blue;
}

td {
	padding-left: 10px;
}

thead {
	background-color: #deb887;
}


tbody tr {
	background-color: #7fffd4;
}

tbody tr:nth-child(2n) {
	background-color: #daed84;
}

3.JS

代码如下：

//添加数据
var email = [{
	addresser: "张三1",
	emailname: "我是邮件1",
	emailcontent: "你要接受"
}, {
	addresser: "张三2",
	emailname: "我是邮件2",
	emailcontent: "你要接受"
}, {
	addresser: "张三3",
	emailname: "我是邮件3",
	emailcontent: "你要接受"
}, {
	addresser: "张三4",
	emailname: "我是邮件4",
	emailcontent: "你要接受"
}, {
	addresser: "张三5",
	emailname: "我是邮件5",
	emailcontent: "你要接受"
}, {
	addresser: "张三6",
	emailname: "我是邮件6",
	emailcontent: "你要接受"
}, {
	addresser: "张三7",
	emailname: "我是邮件7",
	emailcontent: "你要接受"
}, {
	addresser: "张三8",
	emailname: "我是邮件8",
	emailcontent: "你要接受"
}, {
	addresser: "张三9",
	emailname: "我是邮件9",
	emailcontent: "你要接受"
}, ]


//利用for循环向tbody里面创建行，根据数组的长度
var mytbody = document.querySelector("tbody");
for (var i = 0; i < email.length; i++) {
	var mytr = document.createElement("tr");
	mytbody.appendChild(mytr);

	//在遍历数组添加数据前，为每一行添加复选框
	var mytd = document.createElement("td");
	mytr.appendChild(mytd);
	mytd.innerHTML = "<input type='checkbox' class='table_check'>";

	//遍历数组，向表格的每一行内添加数据
	for (var k in email[i]) {
		var mytd = document.createElement("td");
		mytr.appendChild(mytd);
		mytd.innerHTML = email[i][k];
	}
}

//获取表格中的复选框
var CheckAll = document.getElementById("MainCheck");

//获取表格中的复选框
var CheckZi = document.querySelectorAll("tbody input");

//定义一个方法用来实现全选功能，并在HTML页面中绑定事件
function SelectAll() {
	if (!CheckAll.checked) {
		CheckAll.checked = false;
		for (var c = 0; c < CheckZi.length; c++) {
			CheckZi[c].checked = false;
		}
	} else {
		CheckAll.checked = true;
		for (var c = 0; c < CheckZi.length; c++) {
			CheckZi[c].checked = true;
		}
	}

};


//获取tbody中所有的复选框,分别注册点击事件
for (var i = 0; i < CheckZi.length; i++) {
	// 此处了调用了下方定义的方法
	CheckZi[i].onclick = fn;
	//CheckZi[i].addEventListener("change", fn);
}


// 反选功能
function btnInvert() {
	for (var i = 0; i < CheckZi.length; i++) {
		CheckZi[i].checked = !CheckZi[i].checked
	}
	fn();
}


//定义一个方法用来判断表格中的复选框是否被全部选中
function fn() {
	//默认都被选中了
	var flag = true;

	//判断是否所有的复选框都选中
	for (var j = 0; j < CheckZi.length; j++) {
		if (CheckZi[j].checked == false) {
			flag = false;
			break;
		}
	}

	//通过变量flag的值来改变全选复选框的状态
	CheckAll.checked = flag;
}


// 全选功能
function btnSelectAll() {
	//通过循环改变表格内复选框的状态并改变全选复选框的状态
	for (var c = 0; c < CheckZi.length; c++) {
		CheckZi[c].checked = true;
	}
	CheckAll.checked = true;
}


// 取消全选功能
function btnDeselectAll() {
	//通过循环改变表格内复选框的状态并改变全选复选框的状态
	for (var c = 0; c < CheckZi.length; c++) {
		CheckZi[c].checked = false;
	}
	CheckAll.checked = false;
}


// 删除功能
function btnDelete() {
	//获取tbody中的tr
	var tbodytr = document.querySelectorAll("tbody tr");

	//通过循环删除tbody中的tr
	for (var tt = 0; tt < tbodytr.length; tt++) {
		tbodytr[tt].remove();
	}
}