本帖最后由 synchronize 于 2017-12-14 23:39 编辑
第一段代码中的方法可以添加新的行，也可以用removeChild()删除添加之后的行以及页面加载时就有的行。
而在第二段代码中，使用table的情况下removeChild()方法就不能删除页面加载时已存在的行了，需要用deleteRow()这个方法才可以（在代码中注释的那一行）。
请问原理是怎样的？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function addElement() {
var city = document.getElementById("city");
var liEl = document.createElement("li");
var text = document.createTextNode("深圳");
liEl.appendChild(text);
city.appendChild(liEl);
}
function delElement() {
var city = document.getElementById("city");
var liEl = document.getElementsByTagName("li");
city.removeChild(liEl[liEl.length - 1]);
}
</script>
</head>
<body>
<ul id="city">
<li><input type="button" value="添加元素" /></li>
<li><input type="button" value="删除元素" /></li>
<li>北京</li>
<li>上海</li>
</ul>
</body>
</html>
⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function addLine() {
var table = document.getElementById("table1");
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");
var input = document.createElement("input")
input.type = "checkbox";
input.name = "ids";
td4.appendChild(input);
td1.innerHTML = table.rows.length - 2;
tr.appendChild(td1);
td2.align="center";
td2.innerHTML = "数据1";
tr.appendChild(td2);
td3.align="center";
td3.innerHTML = "数据2";
tr.appendChild(td3);
td4.appendChild(input);
tr.appendChild(td4);
table.appendChild(tr);
}
function delLine() {
var table = document.getElementById("table1");
var del = document.getElementsByTagName("tr");
table.removeChild(del[del.length - 1]);
// table.deleteRow(del.length - 1);
}
</script>
</head>
<body>
<table id="table1" border="1" width="80%" align="center">
<tr>
<td colspan="3" align="center">清单 </td>
<td width="100px" align="right">
<input type="button" value="添加" />
<input type="button" value="删除" />
</td>
</tr>
<tr>
<th>ID</th>
<th>数据1</th>
<th>数据2</th>
<th>
全选<input type="checkbox" id="selectAll" name="selectAll" />
</th>
</tr>
<tr>
<td>1</td>
<th>数据1</th>
<th>数据2</th>
<td>
<input type="checkbox" name="ids" />
</td>
</tr>
<tr>
<td>2</td>
<th>数据1</th>
<th>数据2</th>
<td>
<input type="checkbox" name="ids" />
</td>
</tr>
<tr>
<td>3</td>
<th>数据1</th>
<th>数据2</th>
<td>
<input type="checkbox" name="ids" />
</td>
</tr>
</table>
</body>
</html>
而在table中用removeChild()方法就不能删除页面加载时已存在的行了，需要用deleteRow()这个方法才可以（在代码中注释的那一行）。
请问原理是怎样的？
|
|
收藏
淘帖
踩
