用Javascript中的复选框删除表格行
问题描述：
我的Javascript代码有问题。当我点击复选框时，我可以将玩家添加到表格中，并且可以从表格中删除它们。但是当下一次我将某人添加到表中时，删除的行也会插入表中。我希望你能理解，我的问题是什么，你可以帮助我。用Javascript中的复选框删除表格行
$(document).ready(function() {
var players = ["Csabi", "Egér", "Miki", "Mazsi", "Sanyi", "Stam", "Szaki", "Tibi", "Tóni", "Zsolti"];
var count = players.length;
var row = "";
var row1 = "";
var doubles = "";
var tr1 = "<tr class=\"name\"><td class=\"names\" colspan=\"2\">";
var tr2 = "</td><td class=\"score\">0</td><td class=\"score\">72</td><td class=\"score1\">";
$(document).on('click','input[type=button]',function(){
newPlayer = document.getElementById("newplayer").value;
players.push(newPlayer);
i = count + 1;
alert(i);
});
//Generate players from 'players' array
for (i = 0; i < players.length; i++) \t {
var div = document.createElement('div');
var input = document.createElement('input');
var label = document.createElement('label');
input.type = "checkbox";
input.value = players[i];
input.className = "players";
div.className = 'player';
label.className = "labelplayer";
label.innerHTML \t = \t players[i];
document.getElementsByClassName('playerarray')[0].appendChild(div);
document.getElementsByClassName("player")[i].appendChild(input);
document.getElementsByClassName("player")[i].appendChild(label);
// alert("generate" + players[i]);
};
var jatekosok = [];
$("input.players").change(function() {
var checked = $(this).prop("checked");
if (checked) {
row += tr1 + $(this).attr("value") + tr2;
jatekosok.push($(this).attr("value"));
var szam = jatekosok.length;
document.getElementById("row").innerHTML \t = row;
alert("Játékosok száma: "+szam);
for (i = 0; i < szam; i++) {
alert("A játékhoz hozzáadva: " + jatekosok[i]);
document.getElementsByClassName("name")[i].id = jatekosok[i];
};
}
else {
var removeplayer = $(this).attr("value");
alert("A törölt játékos: " + removeplayer);
var rows = document.getElementById(removeplayer);
rows.parentNode.removeChild(rows);
alert("Megtörtént");
var removeplayer = $(this).attr("value");
var index = jatekosok.indexOf(removeplayer);
alert(index);
if (index > -1) {
jatekosok.splice(index, 1);
var szam = jatekosok.length;
for (i = 0; i < szam; i++) {
alert("A játékhoz hozzáadva: " + jatekosok[i]);
document.getElementsByClassName("name")[i].id = jatekosok[i];
alert(i);
};
};
}
});
$(".double").change(function() {
if ($(this).prop("checked")) {
doubles += $(this).attr("value");
document.getElementById("footer").innerHTML = doubles;
}
});
//Dartboard events
$("#dartboard #areas g").children().hover(
function() {
$(this).css("opacity", "0.6");
},
function() {
$(this).css("opacity", "1");
}
);
$("#dartboard #areas g").children().click(function() {
alert($(this).attr("id"));
});
$(document).ready(function() {
$("#azs").click(function() {
alert("0");
});
});
});fieldset {
width: 500px;
}
div.player {
color:blue;
text-align:left;
width: 98px;
border:1px solid black;
float:left;
}
input.players {
}
input#azs \t {
position:relative;
top:485px;
right:515px;
}
input#undo \t {
position:relative;
top:485px;
right:165px;
}
iframe {
border:none;
width:521px;
height:516px;
}
iframe#dartboard \t {
background-color:black;
border:1px solid black;
float:left;
}
svg#selecctor \t {
position:relative;
top:-194px;
left:318px;
}
div#table \t {
position:absolute;
left:535px;
top:16px;
}
table \t {
border-spacing:0px;
}
td \t {
border: 1px solid #ecefea;
border-spacing: 0px;
}
tr \t {
height:34px;
}
tr.name \t {
font-size:23px;
}
td.header \t {
background-color:white;
box-shadow:0px -6px 14px 13px black inset;
color:white;
font-size:17px;
width:350px;
padding-left:6px;
}
td.scoreheader \t {
width:120px;
visibility:hidden;
}
td.name{
background-color:white;
padding-left:6px;
width:100px;
}
td.score \t {
text-align:center;
width:60px;
box-shadow:0px -6px 24px 8px red inset;
color:white;
background-color:white;
}
td.score1 \t {
border:none;
width:33px;
text-align:center;
box-shadow:0px -6px 16px 8px green inset;
font-size:19px;
color:white;
background-color:white;
}
table \t {
font-family:arial;
font-weight:bold;
width:420px;
position:relative;
left:0px;
top:0px;
}
table#row {
width:348px;
}<!DOCTYPE html>
<html>
<head>
<title>Borvirág Darts</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<fieldset>
<legend>Játék beállítása</legend>
<form>
<div class="playerarray"></div>
<div style="clear:both"></div>
Új játékos:<input id="newplayer" type="text" name="player" value="">
<input type="button" name="newPlayer" value="Hozzáad"/><br>
<input class="double" type="checkbox" name="double" value="DoubleIn">Double In<br>
<input class="double" type="checkbox" name="double" value="DoubleOut">Double Out<br>
<input class="game" type="radio" name="game" value="301">301<br>
<input class="game" type="radio" name="game" value="501">501<br>
<input class="game" type="radio" name="game" value="Cricket">Cricket<br>
<input class="game" type="button" name="Submit" value="Game On" />
</form>
</fieldset>
<div id="table">
<table>
<tr><td class="header" colspan="5">A csoport - 1. forduló <span> DOBÁS </span><span> PONT</span></td><td colspan="3" class="scoreheader"></td></tr>
</table>
<table id="row"></table>
<table id="myTable">
<tr><td class="header" colspan="5"><span id="DI"></span></td><td colspan="3" class="scoreheader"></td></tr>
</table>
</div>
<div id="demo"></div>
</body>
</html>
答
看来，当你删除player一样，你不从玩家阵列删除它，但都只是去掉物理行。
但是，当您添加player你推到它（仍包含了所有球员，包括删除玩家）使用球员阵列。
从玩家到达表格行的阵列是'jatekosok'。当我在表格中添加一行时，我将玩家推到'jatekosok'中。当我删除该行时，我也从'jatekosok'数组中删除了该玩家。 –