「已注销」 2020-11-24 10:20 采纳率: 0%

js无法删除默认行，与不能删除最后一行的问题？求解答

<!DOCTYPE html>

<head>

<title>Document</title>

td{

text-align: center;

}

</style>

window.onload=function(){

var oTable = document.getElementById('table');

var oButton = document.getElementById('button');

var oName = document.getElementById('name');

var oAge = document.getElementById('age');

var n=oTable.tBodies[0].rows.length+1;

// console.log(n)

oButton.onclick=function(){

var oTr=document.createElement('tr');

var oTd=document.createElement('td');

oTd.innerHTML=n++;

// console.log(oTable.tBodies[0].rows[1].cells[0])

oTr.appendChild(oTd);

var oTd=document.createElement('td');

oTd.innerHTML=oName.value;

oTr.appendChild(oTd);

var oTd=document.createElement('td');

oTd.innerHTML=oAge.value;

oTr.appendChild(oTd);

var oTd=document.createElement('td');

oTd.innerHTML='<a href="javascript:;">删除</a>';

oTr.appendChild(oTd);

var aA=document.getElementsByTagName('a');

//存在一个未解决的BUG。无法删除最后一条

//存在一个未解决的BUG。必须要先添加一行，才能删除默认的行

for (var i = 0; i < aA.length; i++) {

aA[i].onclick=function(){

console.log(i+"<"+aA.length);

oTable.tBodies[0].removeChild(this.parentNode.parentNode);

}

oTable.tBodies[0].appendChild(oTr);

};

</script>

</head>

<body>

姓名：<input type="text" id="name">

年龄：<input type="text" id="age">

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

1条回答默认最新

禅思院前端领域优质创作者 2020-11-24 17:56

关注

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style type="text/css">
		td {
			text-align: center;

		}
	</style>

	<script type="text/javascript">
	function remove (e) {
		var oTable = document.getElementById('table');
		if (oTable.getAttribute('data-type')) {
			var parent = e.parentNode.parentNode.parentNode
			parent.removeChild(e.parentNode.parentNode)
		} else {
			alert('只有新增之后才能删除')
		}
	}
		window.onload = function () {
			var oTable = document.getElementById('table');
			var oButton = document.getElementById('button');
			var oName = document.getElementById('name');
			var oAge = document.getElementById('age');
			var n = oTable.tBodies[0].rows.length + 1;
			oButton.onclick = function () {
				var oTr = document.createElement('tr');
				var oTd = document.createElement('td');
				oTd.innerHTML = n++;
				oTr.appendChild(oTd);
				var oTd = document.createElement('td');
				oTd.innerHTML = oName.value;
				oTr.appendChild(oTd);
				var oTd = document.createElement('td');
				oTd.innerHTML = oAge.value;
				oTr.appendChild(oTd);
				var oTd = document.createElement('td');
				oTd.innerHTML = '<a data-type="1" href="#" onclick="remove(this)">删除</a>';
				oTr.appendChild(oTd);
				oTable.setAttribute('data-type',1)
				var aA = document.getElementsByTagName('a');
				//存在一个未解决的BUG。无法删除最后一条
				//存在一个未解决的BUG。必须要先添加一行，才能删除默认的行
				for (var i = 0; i < aA.length; i++) {
					aA[i].onclick = function () {
						console.log(i + "<" + aA.length);
						oTable.tBodies[0].removeChild(this.parentNode.parentNode);
					}
				}
				oTable.tBodies[0].appendChild(oTr);
			};
		};

	</script>

</head>

<body>

	姓名：<input type="text" id="name">

	年龄：<input type="text" id="age">

	<input type="button" id="button" value="添加">

	<table id="table" border='1' width="500">

		<thead>

			<tr>

				<td>ID</td>

				<td>姓名</td>

				<td>年龄</td>

				<td>操作</td>

			</tr>

		</thead>

		<tbody>

			<tr>

				<td>1</td>

				<td>张三</td>

				<td>15</td>

				<td><a href="#" onclick="remove(this)">删除</a></td>

			</tr>

			<tr>

				<td>2</td>

				<td>李四</td>

				<td>12</td>

				<td><a href="#" onclick="remove(this)">删除</a></td>

			</tr>

			<tr>

				<td>3</td>

				<td>王五</td>

				<td>54</td>

				<td><a href="#" onclick="remove(this)">删除</a></td>

			</tr>

			<tr>

				<td>4</td>

				<td>赵六</td>

				<td>19</td>

				<td><a href="#" onclick="remove(this)">删除</a></td>

			</tr>

			<tr>

				<td>5</td>

				<td>孙七</td>

				<td>26</td>

				<td><a href="#" onclick="remove(this)">删除</a></td>

			</tr>

			<tr>

				<td>6</td>

				<td>周八</td>

				<td>29</td>

				<td><a href="#" onclick="remove(this)">删除</a></td>

			</tr>

			<tr>

				<td>7</td>

				<td>吴九</td>

				<td>25</td>

				<td><a href="#" onclick="remove(this)">删除</a></td>

			</tr>

		</tbody>

	</table>

</body>

</html>