js的新手小白编程过程出了点bug解决不了,求大神帮助
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><style>td{width:100px;h...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
td {
width: 100px;
height: 40px;
text-align: center;
border: solid white 2px;
}
th {
width: 100px;
height: 40px;
text-align: center;
border: solid white 2px;
}
table {
background: #ffaa99;
}
</style>
</head>
<body>
<table id="table">
<tr>
<th>姓名</th>
<th>学号</th>
<th>性别</th>
<th>成绩</th>
<th>备注</th>
</tr>
<tr>
<td>小华</td>
<td>101011</td>
<td>男</td>
<td>589</td>
<td><button class="dele">删除</button></td>
</tr>
<tr>
<td>小丽</td>
<td>101013</td>
<td>女</td>
<td>548</td>
<td><button class="dele">删除</button></td>
</tr>
<tr>
<td>小明</td>
<td>101024</td>
<td>男</td>
<td>478</td>
<td><button class="dele">删除</button></td>
</tr>
</table>
<div id="d"></div>
<script>
var l;
var d = document.getElementById("d");
var tr = document.getElementsByTagName("tr");
var dele = document.getElementsByClassName("dele");
var add1 = document.createElement("button");
var table = document.getElementById("table")
function animate() {
for(i = 1; i < tr.length; i++) {
tr[i].onmouseover = function() {
this.style.background = "#f2f2f2";
}
tr[i].onmouseleave = function() {
this.style.background = "#FFaa99";
}
}
};
animate();
function addone(x) {
l = tr.length - 1;
add1.innerHTML = "添加";
add1.setAttribute("id", "add");
tr[l].childNodes[x].appendChild(add1);
/* for( var i=1;i<l;i++){
if(tr[i].childNodes[x].childNodes[1]){
tr[i].childNodes[x].removeChild(childNodes[1]);
}
}*/
}
addone(9);
function addonc() {
add.onclick = function() {
l = l + 1;
var tradd = document.createElement("tr");
var butt = document.createElement("button");
butt.innerHTML = "删除";
butt.setAttribute("class", "dele")
for(var i = 0; i < 5; i++) {
var tdadd = document.createElement("td");
tradd.appendChild(tdadd);
table.appendChild(tradd);
if(i == 4) { tdadd.appendChild(butt) };
}
addone(4);
animate();
deletes();
}
}
function deletes() {
for(var i = 0; i < l; i++) {
if(i < l - 1) {
dele[i].onclick = function() {
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
l = l - 1;
deletes();
}
} else if(i == l - 1) {
dele[i].onclick = function() {
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
l = l - 1;
console.log(l);
addone(9)
deletes();
}
}
}
addonc();
}
deletes();
</script>
</body>
</html> 展开
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
td {
width: 100px;
height: 40px;
text-align: center;
border: solid white 2px;
}
th {
width: 100px;
height: 40px;
text-align: center;
border: solid white 2px;
}
table {
background: #ffaa99;
}
</style>
</head>
<body>
<table id="table">
<tr>
<th>姓名</th>
<th>学号</th>
<th>性别</th>
<th>成绩</th>
<th>备注</th>
</tr>
<tr>
<td>小华</td>
<td>101011</td>
<td>男</td>
<td>589</td>
<td><button class="dele">删除</button></td>
</tr>
<tr>
<td>小丽</td>
<td>101013</td>
<td>女</td>
<td>548</td>
<td><button class="dele">删除</button></td>
</tr>
<tr>
<td>小明</td>
<td>101024</td>
<td>男</td>
<td>478</td>
<td><button class="dele">删除</button></td>
</tr>
</table>
<div id="d"></div>
<script>
var l;
var d = document.getElementById("d");
var tr = document.getElementsByTagName("tr");
var dele = document.getElementsByClassName("dele");
var add1 = document.createElement("button");
var table = document.getElementById("table")
function animate() {
for(i = 1; i < tr.length; i++) {
tr[i].onmouseover = function() {
this.style.background = "#f2f2f2";
}
tr[i].onmouseleave = function() {
this.style.background = "#FFaa99";
}
}
};
animate();
function addone(x) {
l = tr.length - 1;
add1.innerHTML = "添加";
add1.setAttribute("id", "add");
tr[l].childNodes[x].appendChild(add1);
/* for( var i=1;i<l;i++){
if(tr[i].childNodes[x].childNodes[1]){
tr[i].childNodes[x].removeChild(childNodes[1]);
}
}*/
}
addone(9);
function addonc() {
add.onclick = function() {
l = l + 1;
var tradd = document.createElement("tr");
var butt = document.createElement("button");
butt.innerHTML = "删除";
butt.setAttribute("class", "dele")
for(var i = 0; i < 5; i++) {
var tdadd = document.createElement("td");
tradd.appendChild(tdadd);
table.appendChild(tradd);
if(i == 4) { tdadd.appendChild(butt) };
}
addone(4);
animate();
deletes();
}
}
function deletes() {
for(var i = 0; i < l; i++) {
if(i < l - 1) {
dele[i].onclick = function() {
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
l = l - 1;
deletes();
}
} else if(i == l - 1) {
dele[i].onclick = function() {
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
l = l - 1;
console.log(l);
addone(9)
deletes();
}
}
}
addonc();
}
deletes();
</script>
</body>
</html> 展开
1个回答
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询