js——table常用操作

程序员文章站 2022-06-01 16:05:51
...
js常用的table操作
效果：
js——table常用操作
代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>table常用操作</title>
		<style type="text/css">
			body {
				text-align: center;
			}

			/* 设置表格居中 */
			#ta {
				margin: auto;
			}

			/* 设置表格的行样式 */
			#ta tr {
				height: 35px;
			}
		</style>
		<script type="text/javascript">
			//删除指定行
			function delRow(btn) {
				//获取table对象
				var ta = document.getElementById("ta");
				//获取要删除行的对象
				var tr = btn.parentNode.parentNode;
				//删除行
				ta.deleteRow(tr.rowIndex);
			}

			//修改指定行
			function updateRow(btn) {
				//获取行对象
				var tr = btn.parentNode.parentNode;
				//获取列对象
				var cell = tr.cells[4];
				//判断cell.innerHTML的值是否是数字
				if (!isNaN(Number(cell.innerHTML))) {
					//修改单元格内容
					cell.innerHTML = "<input type='text' value='" +
						cell.innerHTML + "'οnblur='saveRow(this)'/>";
				}
			}

			//保存修改行
			function saveRow(inp) {
				//获取单元格对象
				var cell = inp.parentNode;
				//实现保存
				cell.innerHTML = inp.value;

			}

			//选择删除项
			function chooseDel() {
				//获取表格对象
				var ta = document.getElementById("ta");
				//获取要删除的行号
				var chks = document.getElementsByName("chk");
				for (var i = 1; i < chks.length; i++) {
					if (chks[i].checked) {
						//删除行
						ta.deleteRow(i);
						//多选时没删除一行行数会改变，这样在下标为i处找不到可删除的元素，减1即可
						i--;
					}
				}
			}

			//添加指定行
			function addRow() {
				//获取table表格对象
				var ta = document.getElementById("ta");
				//添加行
				var tr = ta.insertRow(1);
				//添加单元格
				var cell0 = tr.insertCell(0);
				cell0.innerHTML = "<input type='checkbox' name='chk'/>";
				var cell1 = tr.insertCell(1);
				cell1.innerHTML = document.getElementById("uname").value;
				var cell2 = tr.insertCell(2);
				cell2.innerHTML = "孤尽、鸣莎";
				var cell3 = tr.insertCell(3);
				cell3.innerHTML = "75.20";
				var cell4 = tr.insertCell(4);
				cell4.innerHTML = "3";
				var cell5 = tr.insertCell(5);
				cell5.style.textAlign = "center";
				cell5.innerHTML =
					"<input type='button' value='修改数量' οnclick='updateRow(this)'/>&nbsp;<input type='button' value='删除' οnclick='delRow(this)'/>";
			}

			//复制行
			function copyRow() {
				//获取表格对象
				var ta = document.getElementById("ta");
				//获取选择行对象
				var chks = document.getElementsByName("chk");
				for (var i = 0; i < chks.length; i++) {
					if (chks[i].checked) {
						var tr = ta.insertRow(ta.rows.length);
						//复制行
						tr.innerHTML = ta.rows[i].innerHTML;
					}
				}
			}

			//全选与反选
			function choose() {
				var ck = document.getElementById("ck");
				var chks = document.getElementsByName("chk");
				//如果为选中状态则将所有框都变为选中状态
				if (ck.checked) {
					for (var i = 0; i < chks.length; i++) {
						chks[i].checked = true;
					}
				} else {
					for (var i = 0; i < chks.length; i++) {
						chks[i].checked = false;
					}
				}
			}

			//隔行变色
			function operCss() {
				var trs = document.getElementById("ta").rows;
				//遍历
				for (var i = 0; i < trs.length; i++) {
					if (i % 2 == 0) {
						trs[i].style.backgroundColor = 'yellow';
					} else {
						trs[i].style.backgroundColor = "orange";
					}
				}
			}
		</script>
	</head>
	<body>
		<h3 align="center">table常用操作</h3>
		<input type="button" name="" id="" value="删除" onclick="chooseDel()" />
		<input type="button" name="" id="" value="添加行" onclick="addRow()" />
		<input type="button" name="" id="" value="复制行" onclick="copyRow()" />
		<input type="button" name="" id="" value="隔行变色" onclick=" operCss()" />
		书名：<input type="text" name="uname" id="uname" value="" />
		<hr />
		<table border="1px" id="ta">
			<tr style="text-align: center;font-weight: bold;">
				<td width="50px"><input type="checkbox" name="chk" id="ck" value="0" onclick="choose()" /></td>
				<td width="200px">书名</td>
				<td width="100px">作者</td>
				<td width="100px">价格</td>
				<td width="200px">购买数量</td>
				<td width="200px">操作</td>
			</tr>
			<tr id="t1">
				<td><input type="checkbox" name="chk" id="chk" value="0" /></td>
				<td>Hadoop权威指南</td>
				<td>Tom White</td>
				<td>116.90</td>
				<td>10</td>
				<td align="center">
					<input type="button" name="" id="" value="修改数量" onclick="updateRow(this)" />
					<input type="button" name="" id="" value="删除" onclick="delRow(this)" />
				</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="chk" id="chk" value="1" /></td>
				<td>快学Scala</td>
				<td>Cay S.Horstmann</td>
				<td> 82.00</td>
				<td>2</td>
				<td align="center">
					<input type="button" name="" id="" value="修改数量" onclick="updateRow(this)" />
					<input type="button" name="" id="" value="删除" onclick="delRow(this)" />
				</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="chk" id="chk" value="2"></td>
				<td>机器学习</td>
				<td>周志华</td>
				<td>61.60</td>
				<td>7</td>
				<td align="center">
					<input type="button" name="" id="" value="修改数量" onclick="updateRow(this)" />
					<input type="button" name="" id="" value="删除" onclick="delRow(this)" />
				</td>
			</tr>
		</table>
	</body>
</html>
js——table常用操作

python中list常用操作实例详解

常用js脚本

Node.js操作redis实现添加查询功能

python中字典dict常用操作方法实例总结

prototype.js常用函数详解

常用JS加密编码算法代码第2/2页

工作中常用到的JS表单验证代码(包括例子)

JS字符串统计操作示例【遍历,截取,输出,计算】

jQuery操作表格（table）的常用方法、技巧汇总

js中常用的Math方法总结
