本文介绍了一个简单的HTML页面，该页面包含一个带有两行两列的表格，并通过JavaScript实现了插入和删除行及单元格的功能。读者可以了解到如何使用JavaScript来动态地修改HTML表格结构。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function insRow() {
document.getElementById('myTable').insertRow(0)
}
function insCell() {
var x = document.getElementById('tr2').insertCell(0)
x.innerHTML = "John"
}
function delRow() {
document.getElementById('myTable').deleteRow(0)
}
function delCell() {
document.getElementById('tr2').deleteCell(0)
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr id="tr2">
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</table>
<br />
<br />
<input type="button" onclick="insRow()" value="Insert new row">
<input type="button" onclick="delRow()" value="Delete first row">
<br />
<input type="button" onclick="insCell()" value="Insert cell">
<br />
<input type="button" onclick="delCell()" value="Delete cell">
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function insRow() {
document.getElementById('myTable').insertRow(0)
}
function insCell() {
var x = document.getElementById('tr2').insertCell(0)
x.innerHTML = "John"
}
function delRow() {
document.getElementById('myTable').deleteRow(0)
}
function delCell() {
document.getElementById('tr2').deleteCell(0)
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr id="tr2">
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</table>
<br />
<br />
<input type="button" onclick="insRow()" value="Insert new row">
<input type="button" onclick="delRow()" value="Delete first row">
<br />
<input type="button" onclick="insCell()" value="Insert cell">
<br />
<input type="button" onclick="delCell()" value="Delete cell">
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
