Question

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

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

的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类，以便更容易定位

如何在HTML5表中展开和折叠

1 个答案: