个人中心
gpt4 book ai didi

javascript - 如何设置按钮处理程序来删除父表行？

转载 作者：行者123 更新时间：2023-11-28 04:45:54 25 4
gpt4 key购买 nike

我有这个 HTML 和 jQuery 项目，目前一切都非常适合我希望他们做的事情。我现在需要的是添加一个链接到此行的删除/删除按钮:

'<button class="removeThis" onclick="removeThis(' + tr.length + ')">Delete</button >' +

如您所见，仅当您单击添加按钮并创建具有值的新 TR 时，按钮才可见。

我尝试创建一个 jQuery 函数:

function removeThis(a) {
    $('tr-' + 'a').remove();
}

当然，它并没有做我需要它做的事情。

谁能帮我解决这个问题？

提前致谢。

$(document).ready(function () {

    $('.buttons').on('click', 'button.hide', function () {
        console.log('hide');
        $('form').hide();
    });

    $('.buttons').on('click', 'button.add', function () {
        console.log('add');
        var edit = $('#edit');
        editRow = $('#editRow');

        edit.show();
        if (!($('#addNew').length)) {
            edit.append('<input type="button" id="addNew" onclick="addNewTr()" value="Add" name="submit" />');
        }

        if (editRow) {
            editRow.remove();
        }

        for (var x = 1; x < $('input').length; x++) {
            $('#btd' + x).val('');
        }
    });

    $('#show').click(function () {
        //$('form').show();
        //$('#btd1').val('Vlad');
        //$('#btd2').val('Andrei');
        //$('#btd3').val('vTask');
        //  $('#btd4').val('Ceva');
        //$('#btd5').val('Alceva');
    });
});

function edit(a) {
    var edit = $('#edit');
        addNew = $('#addNew');
        editRow = $('#editRow');

    edit.show();
    if (addNew) {
        addNew.remove();
    }

    if (editRow.length) {
        editRow.replaceWith('<input type="button" id="editRow" onclick="save(' + a + ')" value="Edit" name="submit" />');
    } else  {
        edit.append('<input type="button" id="editRow" onclick="save(' + a + ')" value="Edit" name="submit" />');
    }

    $.each($('.tr-' + a).find('td'), function (key, val) {
        $('form#edit input[type=text]').eq(key).val($(val).text());
    });
}

function save(a) {
    var tr = $('tr');
    valid = true;
    message = '';

    $('form#edit input').each(function () {
        var $this = $(this);

        if (!$this.val()) {
            var inputName = $this.attr('name');
            valid = false;
            message += 'Please complete all the colums' + inputName + '\n';
        }
    });

    if (!valid) {
        alert(message);
    } else {
        for (var q = 1; q < $('.tr-' + a + ' td').length; q++) {
            $('.tr-' + a + ' td:nth-child(' + q + ')').html($('#btd' + q).val());
        }
        for (var x = 1; x < $('input').length; x++) {
            $('#btd' + x).val('');
        }
        $('#editRow').remove();
    }
}

function addNewTr() {
    var tr = $('tr');
    valid = true;
    message = '';

    $('form#edit input').each(function () {
        var $this = $(this);

        if (!$this.val()) {
            var inputName = $this.attr('name');
            valid = false;
            message += 'Please enter your ' + inputName + '\n';
        }
    });

    if (!valid) {
        alert(message);
    } else {
        $('table tbody').append('' +
            '<tr class="tr-' + tr.length + '">' +
            '<td>' + $('#btd1').val() + '</td>' +
            '<td>' + $('#btd2').val() + '</td>' +
            '<td>' + $('#btd3').val() + '</td>' +
            '<td>' + $('#btd4').val() + '</td>' +
            '<td>' + $('#btd5').val() + '</td>' +
            '<td class="buttons">' +
            '<button class="removeThis" onclick="removeThis(' + tr.length + ')">Delete</button >' +
            '<button class="edit" onclick="edit(' + tr.length + ')">Edit</button >' +
            '</td >' +
            '</tr>' +
            '');
        for (var x = 1; x < $('input').length; x++) {
            $('#btd' + x).val('');
        }
    }
}

function removeThis(a) {
    $('tr-' + 'a').remove();
}
<!DOCTYPE html>
<html >
<head >
<link href="../css/vtask.css" rel="stylesheet">
    <title >vTask</title >
<h1 id="hh1">[<a id="vt1">vTask</a>]</h1>
</head >
<body>

<table class="greenTable">
<tr><td colspan="6"><form id="edit" action="" method="post" hidden >
<label for="btd1" ></label >
    <input type="text" name="Name" id="btd1" value="" placeholder="Name">
<label for="btd2" ></label >
    <input type="text" name="Secondary Name" id="btd2" value="" placeholder="Secondary Name">
<label for="btd3" ></label >
    <input type="text" name="Email" id="btd3" value="" placeholder="Email">
<label for="btd4" ></label >
    <input type="text" name="Telephone" id="btd4" value="" placeholder="Telephone">
<label for="btd5" ></label >
    <input type="text" name="Password" id="btd5" value="" placeholder="Password">
</form ></td></tr>
<tr>
<td width="10%">Name</td>
<td width="10%">Secondary Name</td>
<td width="10%">Email</td>
<td width="10%">Telephone</td>
<td width="10%">Password</td>
<td class="buttons" width="20%"><button class="add" >Add</button >
<button class="hide" >Hide</button ></td>
</tr>    
</table >
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body >
</html >

我不想删除任何其他功能。顺便说一句，删除按钮已经添加了 ID removeThis。

非常感谢您。

最佳答案

您完全可以在没有 jQuery 的情况下实现这一目标，我强烈建议您这样做。

function removeThis(e){
  const parentTd  = e.parentNode;
  const parentTr = parentTd.parentNode;
  const parentTable = parentTr.parentNode;

  return parentTable.removeChild(parentTr);
}

然后在你的按钮上做

 <button onClick='removeThis(this)'>Delete me</button>

通过这种方式，您可以创建一个可测试且可重用的函数，您可以使用它来删除所有 DOM 元素。

哦，顺便说一下，这种方法是从内到外进行的，而不是查询整个文档以查找要删除的元素。

关于javascript - 如何设置按钮处理程序来删除父表行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46451778/

25 4 0
文章推荐： c++ - 将编译器命令行转换为 Casablanca Rest SDK 的 CMakeLists.txt
文章推荐： javascript - 无法从 Firefox 中的加载项访问浏览器本地存储
文章推荐： javascript - 导出带有阿拉伯字符的 html 表
文章推荐： c++ - 我如何在 QML 中设置样式表？(只有 QML 没有 C++)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com