javascript - 具有删除行选项的动态表
问题描述
我有一个表格,可以选择添加一个新行,其中包含来自用户的数据和删除按钮(当然,它会删除特定的行)。这似乎有点工作,但我有一个问题,第二次点击后按钮工作。
i
我的函数中有一个计数器Add()
,它计算行+1(它是将第一列中的ID添加到下一个添加的行)。删除一行时,我需要i
在每个较高的行(i--
)中进行更改。之后,当我添加一个新行时,它的 ID 是错误的(它应该是前一个的 +1,但它是相同的)。
另请注意,当我Delete()
从控制台调用我的函数时,它工作得很好。
$("#add_btn").click(function(){Add();});
var D;
var A;
var B;
var B;
var i=1;
function Add()
{
D=$("#dropdown").val();
A=$("#A").val();
B=$("#B").val();
C=$("#C").val();
$("#myTable2").append(`
<tr id="row`+i+`">
<td class="clm1" id="id`+i+`">`+i+`.</td>
<td class="clm2">`+D+`</td>
<td class="clm3">`+A+`</td>
<td class="clm4">`+B+`</td>
<td class="clm5">`+B+`</td>
<td class="clm6" id="btn`+i+`"><input type="button" class="delete" id='delete`+i+`' value="x"></td>
</tr>`);
$("#delete"+i).click(function() {Delete(i);});
n=i;
i++;
}
function Delete(id)
{
var j;
i--;
$("#row"+id+"").remove();
for(j=id; j<n; j++)
{
a=Number(j)+1;
$("#id"+a).html(j+".");
$("#id"+a).prop("id", "id"+j);
$("#btn"+a).html(`<input type="button" class="delete" id='delete`+j+`' value="x">`);
$("#delete"+a).click(function(){Delete(j);});
$("#btn"+a).prop("id", "btn"+j);
$("#row"+a).prop("id", "row"+j);
}
}
#container
{
background-color: lightsteelblue;
height:300px;
width:600px;
margin-left: auto;
margin-right: auto;
font-size:9px;
}
.tableContainer{
height:auto;
width:416px;
border: solid black 1px;
}
#myTablecontainer
{
width:100%;
background-color: navy;
border: solid lightgray 1px;
border-bottom: none;
border-top: none;
}
#myTable
{
width:400px;
height:auto;
max-height: 150px;
border-collapse: collapse;
background-color: navy;
}
#myTable tr
{
width:100%;
}
.MyTableHeadings
{
font-weight: bold;
text-align: center;
background-color: navy;
color:white;
border-left: solid red 1px;
padding-left: 5px;
padding-right: 5px;
}
#myTable tr .clm1
{
border-left: none;
}
.scrollContent
{
height:auto;
max-height: 300px;
width:416px;
overflow-y:auto;
background-color: navy;
}
#myTable2
{
width:400px;
height:auto;
max-height: 150px;
border: solid lightgray 1px;
border-collapse: collapse;
}
#myTable2 tr{
width:100%;
}
#myTable2 tr:nth-child(even)
{
background-color: lightgray;
}
#myTable2 tr:nth-child(odd)
{
background-color: lightslategrey;
}
#myTable2 td
{
text-align: center;
padding-left: 5px;
padding-right: 5px;
}
.clm1{
width:10%;
}
.clm2
{
width: 25%;
}
.clm3
{
width: 15%;
}
.clm4
{
width:20%;
}
.clm5
{
width:20%;
}
#myTable2 tr .clm6
{
text-align: left;
width: 10%;
}
<body>
<div id="container">
<fieldset>
<legend>Dane</legend>
Dropdown
<select
name="drp"
id="dropdown"
style="width:90px;"
>
<option value="0"></option>
<option value="1">1 </option>
<option value="2">2</option>
</select>
<br>
A
<input type="text" id="A">
<br>
B
<input type="text" id="B">
<br>
C
<input type="text" id="C">
<input type="button" value='Add' id='add_btn'/>
</fieldset>
<div id="tableContainer" class="tableContainer">
<div id="myTablecontainer">
<table id="myTable" >
<tr>
<th class='MyTableHeadings clm1'> ID</th>
<th class='MyTableHeadings clm2'>H1</th>
<th class='MyTableHeadings clm3'> H2</th>
<th class='MyTableHeadings clm4'>H3</th>
<th class='MyTableHeadings clm5'>H4</th>
<th class='MyTableHeadings clm6'>Delete</th>
</tr>
</table>
</div>
<div class="scrollContent">
<table id="myTable2">
</table>
</div>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
解决方案
问题是因为您的第一次单击添加了事件处理程序,第二次单击事件处理程序执行。这也有在后续点击中添加越来越多的事件处理程序的不良副作用。
要解决问题并改进逻辑,请使用委托事件处理程序。这样你就可以遍历 DOM 来找到相关tr
的closest()
. 这反过来意味着您可以删除所有增量id
属性的丑陋。
这里还有几件事需要注意。首先,当您使用模板文字时,您在连接值时错过了它们的意义。${}
改为使用语法注入值。您还声明了B
两次变量;删除一个。
说了这么多,试试这个:
$("#add_btn").click(Add);
$('#myTable2').on('click', '.delete', function() {
$(this).closest('tr').remove();
});
var D, A, B, i = 1;
function Add() {
D = $("#dropdown").val();
A = $("#A").val();
B = $("#B").val();
C = $("#C").val();
$("#myTable2").append(`
<tr>
<td class="clm1">${i}.</td>
<td class="clm2">${D}</td>
<td class="clm3">${A}</td>
<td class="clm4">${B}</td>
<td class="clm5">${B}</td>
<td class="clm6"><input type="button" class="delete" value="x"></td>
</tr>`);
i++;
}
#container {
background-color: lightsteelblue;
height: 300px;
width: 600px;
margin-left: auto;
margin-right: auto;
font-size: 9px;
}
.tableContainer {
height: auto;
width: 416px;
border: solid black 1px;
}
#myTablecontainer {
width: 100%;
background-color: navy;
border: solid lightgray 1px;
border-bottom: none;
border-top: none;
}
#myTable {
width: 400px;
height: auto;
max-height: 150px;
border-collapse: collapse;
background-color: navy;
}
#myTable tr {
width: 100%;
}
.MyTableHeadings {
font-weight: bold;
text-align: center;
background-color: navy;
color: white;
border-left: solid red 1px;
padding-left: 5px;
padding-right: 5px;
}
#myTable tr .clm1 {
border-left: none;
}
.scrollContent {
height: auto;
max-height: 300px;
width: 416px;
overflow-y: auto;
background-color: navy;
}
#myTable2 {
width: 400px;
height: auto;
max-height: 150px;
border: solid lightgray 1px;
border-collapse: collapse;
}
#myTable2 tr {
width: 100%;
}
#myTable2 tr:nth-child(even) {
background-color: lightgray;
}
#myTable2 tr:nth-child(odd) {
background-color: lightslategrey;
}
#myTable2 td {
text-align: center;
padding-left: 5px;
padding-right: 5px;
}
.clm1 {
width: 10%;
}
.clm2 {
width: 25%;
}
.clm3 {
width: 15%;
}
.clm4 {
width: 20%;
}
.clm5 {
width: 20%;
}
#myTable2 tr .clm6 {
text-align: left;
width: 10%;
}
<div id="container">
<fieldset>
<legend>Dane</legend>
Dropdown
<select name="drp" id="dropdown" style="width:90px;">
<option value="0"></option>
<option value="1">1 </option>
<option value="2">2</option>
</select><br>
A <input type="text" id="A"><br>
B <input type="text" id="B"><br>
C <input type="text" id="C">
<input type="button" value='Add' id='add_btn' />
</fieldset>
<div id="tableContainer" class="tableContainer">
<div id="myTablecontainer">
<table id="myTable">
<tr>
<th class="MyTableHeadings clm1">ID</th>
<th class="MyTableHeadings clm2">H1</th>
<th class="MyTableHeadings clm3">H2</th>
<th class="MyTableHeadings clm4">H3</th>
<th class="MyTableHeadings clm5">H4</th>
<th class="MyTableHeadings clm6">Delete</th>
</tr>
</table>
</div>
<div class="scrollContent">
<table id="myTable2"></table>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
推荐阅读
- python - 尽管没有错误,但 Flask 应用程序未呈现 html 页面
- rxjs - 是否有选择时间范围内最大值的去抖动版本?(RxJS)
- django - Django 中的自定义分页无法正常工作
- python - Django 一直说字段是必需的,即使已经提供了字段
- c# - 野田时间和循环操作(c#)
- google-apps-script - Spreadsheet().insertSheet(index, name) 不会在索引处插入工作表,而是作为最后一个工作表
- android - 为什么设备上出现“无法确定位置”?
- python - Python 中的音频压缩器
- android - 未找到 OpenCv 管理器包
- python - 尝试在 Python 中使用条件初始化类变量