//JS功能部分
window.onload = function(){
var oTab1 = document.getElementById("tab1");
var oUserName = document.getElementById("username");
var oAge = document.getElementById("age");
var btnAdd = document.getElementById("add");
var id = oTab1.tBodies[0].rows.length + 1;
btnAdd.onclick = function(){
var oTr = document.createElement("tr");
var oTd = document.createElement("td");
oTd.innerHTML = id++;
oTr.appendChild(oTd);
var oTd = document.createElement("td");
oTd.innerHTML = oUserName.value;
oTr.appendChild(oTd);
var oTd = document.createElement("td");
oTd.innerHTML = oAge.value;
oTr.appendChild(oTd);
var oTd = document.createElement("td");
oTd.innerHTML = '删除';
oTr.appendChild(oTd);
oTd.getElementsByTagName("a")[0].onclick = function(){
//tBodies不能少 这里的this是a,但我们要删除的是tr(是a的爷爷)
oTab1.tBodies[0].removeChild(this.parentNode.parentNode);
}
oTab1.tBodies[0].appendChild(oTr);
}
}
姓名:
年龄:
ID
姓名
年龄
操作
1
Blue
27
2
张三
22
3
李四
39
4
王五
20
5
马六
25
代码有点长,不过大神眼里一般都是小儿科了,简单的一个表格添加删除的小功能。
问这么个问题:
js中先把表格的tr个数全部存入id
var id = oTab1.tBodies[0].rows.length + 1;
问题在这!!!
后面在添加一行tr的时候
用的却是id ++,比如我的代码原本是5行,5存入了变量id中,后面来个i++不就变成6行了?我实际上只有5行才对啊。然后再添加一行不就变成7行了(实际只有6行才对)?
var oTd = document.createElement("td");
oTd.innerHTML = id++;
oTr.appendChild(oTd);
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1,你在一个函数中多次使用统一变量不太好之外,并没有错。最好把变量命名改成不同的。
2,你开始存入的是行数加1,比如这个例子
id开始是6,然后点击的时候,第一个oTd的innerHTML赋值为id,也就是6,刚好是添加的序数,然后id自加。估计你是对前加加和后加加的不太理解你在删除的事件中添加一句
id--;就可以了。添加的时候,id+1,那么删除的时候id也要-1.
当然,这种涉及到排序的需要考虑的因素就很多,比如在中间删掉一个,id序列会是什么情况?中间删掉一个再添加一个又是什么情况?这些都要考虑,肯定处理的逻辑就要复杂一些。