javascript - 如何在 HTML5 表格中展开和折叠

Question

我正在尝试从 Odata web 服务动态填充 HTML5 中的表格。我正在使用 JQuery 来填充它。当单击每行的第一列时，我还必须在表格的每一行下方显示一个子表格。我应该能够从父表的任何行切换表。

我已附上该功能的屏幕截图。你能告诉我如何实现吗？

JavaScript:

var xml;
$.ajax(
    {
        url: "https://192.168.2.133:8080/sap/inv/opu/odata/sap/ZMM_CM_GR_OPENPO/zmm_gr_openpoCollection?$filter=bednr%20eq'0000000112'",

        type: 'GET',
        contentType: "application/xml;charset=utf-8",
        dataType: "",
        cache: false,

        success: function (data) {
            alert("Inside success");
            $(data).find("content").each(function () {
                $(this).find("m\\:properties, properties").each(function () {
                    var $info = $(this);
                    var mat_doc_no = $info.find("d\\:mat_doc_no, mat_doc_no").text();
                    var zvendor = $info.find("d\\:zvendor, zvendor").text();
                    var ebelp_c = $info.find("d\\:ebelp_c, ebelp_c").text();
                    var zz_tmdocno_c = $info.find("d\\:zz_tmdocno_c, zz_tmdocno_c").text();
                    var zz_tmdocno = $info.find("d\\:zz_tmdocno, zz_tmdocno").text();
                    var bedat = $info.find("d\\:bedat, bedat").text();
                    var menge_c = $info.find("d\\:menge_c, menge_c").text();
                    var ebeln = $info.find("d\\:ebeln, ebeln").text();

                    localStorage.setItem("ebeln", ebeln);
                    localStorage.setItem("zz_tmdocno", zz_tmdocno);
                    localStorage.setItem("bedat", bedat);
                    localStorage.setItem("zvendor", zvendor);`enter code here`

                    $('tbody').append('<tr id="test" ><td><input type="checkbox" class = "chcktbl" /></td><td onclick="showGRPODetails()"><u><b>' + ebeln + '</b></u></td><td>' + zz_tmdocno + '</td><td>' + bedat + '</td><td>' + zvendor + '</td></tr>');

                });`enter code here`
            });
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("Could not connect URL...!");
        }
    });

function showGRPODetails() {
    $("#testid").toggle();

}

Answer 1

我建议将您的 jQuery 从内联更改为事件

取出这段代码 onclick="showGRPODetails()"

在准备好的函数或文档中添加它

$('td').click(function () {
   $(this).find('table').slideToggle();
});

我给动态子表一个 subTable 类，只是为了更容易定位