现阶段所知道的操作表格方式,共分为以下几种,后续还会添加:
一.使用行列数操作表格
<!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>
运行结果见图片