使用javascript或Jquery重置HTML表数据

Question

我有下表结构，

<table id="tblPtPrtDtl" class="table table-bordered table-striped mb-none">
                                            <tr>
                                                <th>
                                                    <b>File Number </b>
                                                </th>
                                                <th>
                                                    <b>Name </b>
                                                </th>
                                                <th>
                                                    <b>Status </b>
                                                </th>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <span class="prtfilenum"></span>
                                                </td>
                                                <td>
                                                    <span class="prtname"></span>
                                                </td>
                                                <td>
                                                    <span class="prtstatus"></span>
                                                </td>
                                            </tr>
                                        </table>

我使用web方法(页面方法)填充这个表，这是AJAX调用它之后的JS成功函数。

var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);
            var customers = xml.find("PtPrt");
            var row = $("[id*=tblPtPrtDtl] > tbody tr:last-child").clone(true);
            $("[id*=tblPtPrtDtl] tr").not(':has(th)').remove();
            $.each(customers, function () {
                $(".prtfilenum", row).html($(this).find("PrtFilenum").text());
                $(".prtname", row).html($(this).find("Column1").text());
                $(".prtstatus", row).html($(this).find("PrtStatus").text());
                $("[id*=tblPtPrtDtl]").append(row);
                row = $("[id*=tblPtPrtDtl] > tbody tr:last-child").clone(true);

我正在尝试清空表，但是删除所有行将删除填充表所需的类。

我希望清除行中的所有数据，并且只保留一个空的，在需要时重新填充字段时，其中的类是完整的。

我尝试了以下函数，但是删除了所有行和它们的类，这阻止了我重新填充表。

$("#tblPtPrtDtl tr").remove();
$("#tblPtPrtDtl tr").detach();

谢谢

Answer 1

因此，我围绕它工作，首先使用javascripting生成表，然后用数据填充表。我把桌子的结构完全移除，把它清理干净。这样，我就可以继续使用不同记录的表，而无需刷新页面。下面的代码填充定义的Div区域中的表

  var tbl = $("<table>").attr("id", "tblPtPrtDtl").addClass("table table-bordered table-striped mb-none");
        var tr1 = $("<tr>").append($("<th>").append($("<b>").text("File Number")))
        .append($("<th>").append($("<b>").text("Name")))
        .append($("<th>").append($("<b>").text("Status")));
        var tr2 = $("<tr>").append($("<td>").append($("<span>").attr("id", "prtfilenum")))
        .append($("<td>").append($("<span>").attr("id", "prtname")))
        .append($("<td>").append($("<span>").attr("id", "prtstatus")));

        tbl.append(tr1);
        tbl.append(tr2);
        if ($('#tblPtPrtDtl').length) { $('#tblPtPrtDtl').remove(); $("#dvTable").append(tbl); } else { $("#dvTable").append(tbl); }

要移除它我用

if ($('#tblPtPrtDtl').length) { $('#tblPtPrtDtl').remove() }

参考文献：https://forums.asp.net/post/6132153.aspx