[英]Add & Remove Cells from Cloned Table Rows
I am trying to create a table that I can add & remove rows from as needed.我正在尝试创建一个表,我可以根据需要添加和删除行。 The table itself is created on the fly with PHP and I have no way of knowing how many cells will be in each table row.表格本身是使用 PHP 即时创建的,我无法知道每个表格行中有多少个单元格。 So far I have been able to add rows successfully but have been stymied as to how to remove a specific row when the "X" is pressed.到目前为止,我已经能够成功添加行,但是在按下“X”时如何删除特定行一直受阻。
I figure, if I can pass a number to the "remove" function, that can be used to determine what row to delete.我想,如果我可以将一个数字传递给“删除”函数,它可以用来确定要删除的行。 I have been attempting to remove the final "td" from the cloned data and replace it with a "td" that contains the correct function argument.我一直在尝试从克隆数据中删除最终的“td”,并将其替换为包含正确函数参数的“td”。
Nothing I've tried has worked thus far.到目前为止,我尝试过的一切都没有奏效。 Any suggestions?有什么建议?
HTML HTML
<table class='group'>
<tr class='group_row_0'>
<td>Thing 1</td>
<td>Thing 2</td>
<td>Thing 3</td>
<td>Thing 4</td>
<td>
<a href='#' class='group_remove' onclick='javascript:removeGroupField(0);'>X</a> <!-- The "0" here needs to be replaced with the new row # -->
</td>
</tr>
</table>
<a href='#' class='group_add' onclick='javascript:addGroupField();'>+ Add Row</a>
Javascript: Javascript:
var row_index = 1;
function addGroupField(){
var last_row = row_index-1;
var rowData = $('.group_row_'+last_row).clone();
rowData.attr('class','group_row_'+row_index);
$('.group').append(rowData);
row_index++;
}
You should try to attach your handlers with Javascript properly, not with inline handlers.您应该尝试使用 Javascript 正确附加处理程序,而不是使用内联处理程序。 Just add a single handler to the table, and when the X
is clicked, remove the row by navigating upwards from the clicked button to the tr
to remove:只需向表中添加一个处理程序,当单击X
时,通过从单击的按钮向上导航到要删除的tr
来删除行:
$('table.group').on('click', '.group_remove', function() { const tr = this.parentElement.parentElement; tr.remove(); }); $('.add').on('click', function (){ const cloned = $('.group tr:last-child').clone(); $('.group').append(cloned); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class='group'> <tr class='group_row_0'> <td>Thing 1</td> <td>Thing 2</td> <td>Thing 3</td> <td>Thing 4</td> <td> <a href='#' class='group_remove'>X</a> </td> </tr> <tr class='group_row_1'> <td>Thing 1</td> <td>Thing 2</td> <td>Thing 3</td> <td>Thing 4</td> <td> <a href='#' class='group_remove'>X</a> </td> </tr> <tr class='group_row_2'> <td>Thing 1</td> <td>Thing 2</td> <td>Thing 3</td> <td>Thing 4</td> <td> <a href='#' class='group_remove'>X</a> </td> </tr> <tr class='group_row_3'> <td>Thing 1</td> <td>Thing 2</td> <td>Thing 3</td> <td>Thing 4</td> <td> <a href='#' class='group_remove'>X</a> </td> </tr> </table> <div class="add">add row</div>
It seems like you're using some jQuery so you could try this for the x's.看起来你正在使用一些 jQuery,所以你可以为 x 尝试这个。
$(document).on('click', '.group_remove', function(){
$(this).closest('tr').remove();
});
It works by go up the DOM tree to find the closest tr element to the element that is clicked (this is the specific group_remove class element).它的工作原理是向上 DOM 树查找与被单击元素最近的 tr 元素(这是特定的 group_remove 类元素)。 Then, that element, and everything inside it, is removed.然后,该元素以及其中的所有内容都将被删除。
<?php
echo "<table border=0 width=100%>
<tr id='tabRow'></tr>
</table>";
echo "<center><button = addcell();>Add</button></center>";
?>
Script脚本
function addcell()
{
var row = document.getElementById("tabRow");
var nrow = row.cells.length;
var addcell = row.insertCell(nrow);
addcell.align = "right";
addcell.innerHTML = "<font color=red onclick=deletecell(this)><sup>X</sup></font>Hello World";
}
function deletecell(rmvcell)
{
document.getElementById("tabRow").deleteCell(rmvcell.cellIndex);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.