时间戳

首页 > 解决方案 > 如何编辑和删除一行？

javascript - 如何编辑和删除一行？

问题描述

我有一张桌子：

<table id="table">
    <thead>
        <tr>
            <th> ID </th>
            <th> Job</th>
            <th> Title</th>
        </tr>
    </thead>
</table>

我还有一个模式，当用户单击提交时会创建一个新行，它会获取该数据并创建一个新行。在每一行旁边，我想要 2 个图标，一个编辑图标和一个删除图标。我只是好奇，如果用户选择“编辑”，我该如何设置它，它只会编辑那一行，或者如果用户选择“删除”，它只会删除那一行。

如果我有自己喜欢的 ID，这会更容易，但是当用户创建新行时，我无法创建随机 ID。

我应该如何解决这个问题？

以下是用户创建新行时的样子：

let id = document.getElementById('id').value;
let job = document.getElementById('job').value;
let title = document.getElementById('title').value;
$('#table').append('<tr><th class="icon"><button class="btn"><i class="mdi mdi-pencil" title="Edit"></i></button><button class="btn"><i class="mdi mdi-delete" title="Delete"></i></button></th><th>'+id+'</th><th>' + job + '</th><th>' + title + '</th></tr>')

对不起，如果这有点混乱。我没有经验，这是我知道如何将用户输入的数据添加到一行中的唯一方法。

谢谢！

标签： javascripthtmljquery

解决方案

只需使用 jQuery 查找最近的行并将其删除。我对删除按钮做了一个删除类，以使其更容易。编辑行的类似概念，一旦您引用了行，您就可以深入了解要编辑的元素。

$('#table').append('<tr><th class="icon"><button class="btn"><i class="mdi mdi-pencil" title="Edit"></i></button><button class="btn delete"><i class="mdi mdi-delete" title="Delete"></i></button></th><th>'+id+'</th><th>' + job + '</th><th>' + title + '</th></tr>');

$('button.delete').on('click', function(){
    $(this).closest('tr').remove();
 });

推荐阅读