协助表格添加行中的值并使用按钮删除它们。使用 jQuery
Posted
技术标签:
【中文标题】协助表格添加行中的值并使用按钮删除它们。使用 jQuery【英文标题】：Assistance with a table to add values in rows and delete them with a button. Using JQuery 【发布时间】：2019-04-10 22:19:30 【问题描述】：我想创建一个表格，它会提示您添加您的姓名和职业，并将它们添加到表格中的一行中。这些值应该进入一个数组。删除按钮将从数组中删除它们并删除该行。应该也有柜台。
目前我试图只为数组peopleArray[] 这样做。我遇到的问题是删除按钮在“添加”功能之外不起作用并执行多次，只需单击一下即可删除数组中的所有内容。我放错了东西。
*
font-family: verdana;
.table-container
border-radius: 10px;
overflow: hidden;
display: inline-block;
.table
border-collapse: collapse;
border-spacing: 0;
.table tr
text-align: center;
.table tr:nth-child(2n)
background-color: #eeeeee;
.table tr:nth-child(2n-1)
background-color: #fcfafa;
.table th
padding: 0 10px;
font-size: 12px;
width: 150px;
background-color: #A9BABA;
color: #000;
.table th:first-child,
.table th:nth-child(4)
width: 15px;
.counter
font-size: 12px;
font-weight: bold;
padding: 5px;
.btn_img
width: 20px;
.button_style
border: none;
background: none;
transition: all 0.5s;
padding: 5px;
.button_style:hover
transform: scale(1.2);
.button_style:focus
transform: rotateY(180deg);
outline: none;
table td
padding: 0 10px;
border: 1px solid white;
font-size: 15px;
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div class="table-container">
<table class="table">
<tr>
<th class="">No.</th>
<th class="">Name</th>
<th class="">Occupation</th>
<th class="">
<button id="btn_add_people" class="button_style"><img class="btn_img" src="https://i.imgur.com/6FXVi7B.png" >
</button></th>
</tr>
<tr>
<td id="counter" class="counter" colspan="4"></td>
</tr>
</table>
</div>
<script>
$(document).ready(function()
var peopleArray = [];
var occupArray = [];
var countP = 0;
$("#btn_add_people").click(function()
var personName = prompt("Enter a name please!");
var personOccup = prompt("Enter an occupation please!");
peopleArray.push(personName);
occupArray.push(personOccup);
countP = peopleArray.length
var addedRow = '<tr id=""><td colspan="1" >' + peopleArray.length + '</td><td id="name' + peopleArray.length + '" colspan="1">' + peopleArray[peopleArray.length - 1] + '</td><td colspan="1">' + occupArray[occupArray.length - 1] + '</td><td colspan="1"><button id="' + peopleArray.length + '" class="button_style btn_remove_person"><img src="https://i.imgur.com/eiyNHjs.png" class="btn_img" /></button></td></tr>';
$(".table").append(addedRow);
$("#counter").text("People added: " + countP);
$("tr").on('click', '.btn_remove_person', (function()
$(this).parents("tr").remove()
var exitN = $(this).attr("id");
peopleArray.splice(exitN - 1, 1);
// get ID from button and connect with ID to splice name and occupation !!!
$("#counter").text("People added: " + countP);
));
);
);
</script>
</body>
</html>【问题讨论】：
【参考方案1】：您可以删除$(document).ready(function() );，因为您并没有真正充分利用它。如果您想保留它以防止用户输入信息，则先隐藏添加按钮，然后在.ready 显示该按钮以指示它可以使用。
保留用于添加条目的 JQuery，但在创建删除按钮时添加一个 onclick 函数来删除条目。
我将您的计数器计算留给您，因为我不知道您希望如何计算计数器。添加的人数是包含已删除条目的总数？人们添加了表中的条目计数？条目旁边的数字是行号，或者在被删除之前可以是 23 和 22，等等...
var peopleArray = [];
var occupArray = [];
var countP = 0;
$("#btn_add_people").click(function()
var personName = prompt("Enter a name please!");
var personOccup = prompt("Enter an occupation please!");
peopleArray.push(personName);
occupArray.push(personOccup);
countP = peopleArray.length
var addedRow = '<tr id=""><td colspan="1" >' + peopleArray.length + '</td><td id="name' + peopleArray.length + '" colspan="1">' + peopleArray[peopleArray.length - 1] + '</td><td colspan="1">' + occupArray[occupArray.length - 1] + '</td><td colspan="1"><button id="' + peopleArray.length + '" class="button_style btn_remove_person" onclick="_removeEntry(this)">Delete</button></td></tr>';
$(".table").append(addedRow);
$("#counter").text("People added: " + countP);
);
function _removeEntry(e)
$(e).parents("tr").remove()
var exitN = $(e).attr("id");
peopleArray.splice(exitN - 1, 1);
$("#counter").text("People added: " + countP);
;
【讨论】：
以上是关于协助表格添加行中的值并使用按钮删除它们。使用 jQuery的主要内容，如果未能解决你的问题，请参考以下文章