表格的添加与删除

现阶段所知道的操作表格方式,共分为以下几种,后续还会添加:

一.使用行列数操作表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#table1{
				border: 1px solid black;
				border-collapse: collapse;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<table id="table1" border="px">
				<tr>
					<td>编号</td>
					<td>姓名</td>
					<td>电话号码</td>
					<td>月薪(元)</td>
				</tr>
				<tr>
					<td>100</td>
					<td>斯蒂芬</td>
					<td>515.123.4567</td>
					<td>24000</td>
				</tr>
				<tr id="lastRow">
					<td>103</td>
					<td>亚历山大</td>
					<td>515.123.4567</td>
					<td>9000</td>
				</tr>
			</table>
			
			<br />
			<input type="button" value="添加数据" onclick="addRow()"/>
			<input type="button" value="删除数据" onclick="remRow()"/>
	</body>
	<script>
		var attributeArray = new Array();
		attributeArray[0] = "编号";
		attributeArray[1] = "姓名";
		attributeArray[2] = "电话号码";
		attributeArray[3] = "月薪";
		function addRow(){//添加一行(末尾添加)
			var tableElem = document.getElementById("table1");
			var tableRows = tableElem.rows.length;//获取表格行数
			var newRow = tableElem.insertRow(tableRows);//在末尾添加新的一行,返回新行的节点
			for(var i=0;i<4;i++)
			{
				newRow.insertCell(i).innerHTML = prompt(attributeArray[i]);
			}
		}
		
		function remRow(){//删除一行(末尾删除)
			var tableElem = document.getElementById("table1");
			var delRow = prompt("请输入要删除数据的编号?");
			for (var i=1;i<tableElem.rows.length;i++) {
				if (Number(delRow) == tableElem.rows[i].cells[0].innerHTML) {
					tableElem.deleteRow(i);
				}
			}
		}
	</script>
</html>

运行结果见图片



猜你喜欢

转载自blog.csdn.net/qq_39844168/article/details/80946424