javascript 如何使用js将所有行移动(追加)到另一个表中

我想选择所有的数据行并自动进入另一个表，但我没有找到这样做的方法。
使用Jquery将我的当前条件按1移动，代码如下

$("#tblcandidate").on("change", ".chkCheckBoxId", function () {
    if ($(".chkCheckBoxId").is(":checked")) {
        $(".fail").hide();
        var trItem = $(this).closest("tr");
        trItem.find(".chkCheckBoxIdFail").closest("td").remove();
        trItem.add("<tr>").append("</tr>");

        $("#tblcandidateprocess").append(trItem);
    }
});

我的目标是创建一个函数，可以使用按钮将所有行追加到另一个表中

- 编辑**：

我的数据表来自ajax belox

function loadData(monthyear) {
        return $.ajax({
            url: "@Url.Action("ListCandidate", "Recruitment")?monthyear=" + monthyear,
            type: "GET",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            beforeSend: function () {
                swal.fire({
                    title: "Please wait a moment",
                    text: "Loading data...",
                    showConfirmButton: false,
                    allowOutsideClick: false,
                    willOpen: () => {
                        Swal.showLoading()
                    },
                });
            },
            success: function (data) {
                var getTemp = "@TempData["Allert"]";
                if (getTemp === "Data successfully selected") {
                    Swal.fire({
                        text: getTemp,
                        icon: "success",
                        buttonsStyling: false,
                        confirmButtonText: "Ok, got it!",
                        customClass: {
                            confirmButton: "btn btn-primary"
                        }
                    });
                }
                else if (getTemp === "Something Went Wrong") {
                        Swal.fire({
                            text: getTemp,
                            icon: "error",
                            buttonsStyling: false,
                            confirmButtonText: "Ok, got it!",
                            customClass: {
                                confirmButton: "btn btn-primary"
                            }
                        });
                }
                else {
                    swal.close();
                }
                var html = '';

                // delete existing row if any
                table.clear().draw();

                $.each(data, function (key, item) {
                    var TglLahir = item.TglLahir;
                    var cvTglLahir = moment(TglLahir).format('YYYY-MM-DD') ;

                    if (item.NamaS2 != null || item.NamaS2 != "") {
                            var namas2 = item.NamaS2;
                    }
                    else {
                        var namas2 = "A";
                    }
                    if (item.NamaS1 != null || item.NamaS1 != "") {
                            var namas1 = item.NamaS1;
                    }
                    else {
                        var namas1 = "A";
                    }
                    if (item.NamaD3 != null || item.NamaD3 != "") {
                        var namad3 = item.NamaD3;
                    }
                    else {
                        var namad3 = "A";
                    }
                    html += '<tr class="text-capitalize">';
                    html += '<td><span class="d-none">' + "'" + '</span> <a href="@Url.Action("DetailTracing", "Recruitment")?NomorKtp=' + item.NomorKTP + '" class="d-flex text-dark text-hover-primary align-items-center mb-5"><div class="d-flex flex-column justify-content-start fw-bold">' + item.NomorKTP+'</div></a></td>';
                    html += '<td class="text-gray-800 text-hover-primary mb-1">' + item.NamaLengkap.toLowerCase() + '</td>';
                    html += '<td class="text-gray-800 text-hover-primary mb-1">' + item.PosisiYangDilamar.toLowerCase() + '</td>';
and etc

然后，我想将显示的行从此表A移动到我的表B

下面是我的Vanilla-JavaScript实现的更新版本，它在两个表的<tbody>之间传输各个<tr>：

document.querySelectorAll("button").forEach(b=>b.onclick=ev=>{
 let tr=b.closest("tr");
 document.querySelector((tr.closest("table").id=="source"?"#target":"#source")+" tbody").append(tr);
});

<div id="content">
<table id="source">
<thead>
<tr><th>A</th><th>B</th><th>C</th><th>D</th></tr>
</thead>
<tbody>
<tr><td>1 one</td><td>two</td><td>three</td><td>four</td><td><button>transfer</button></td></tr>
<tr><td>2 one</td><td>two</td><td>three</td><td>four</td><td><button>transfer</button></td></tr>
<tr><td>3 one</td><td>two</td><td>three</td><td>four</td><td><button>transfer</button></td></tr>
<tr><td>4 one</td><td>two</td><td>three</td><td>four</td><td><button>transfer</button></td></tr>
</tbody>
</table>
<hr>
<table id="target">
<thead>
<tr><th>A</th><th>B</th><th>C</th><th>D</th></tr>
</thead>
<tbody></tbody></table>
</div>

javascript 如何使用js将所有行移动(追加)到另一个表中

1条答案

相关问题

热门标签

最新问答