Question

我正在尝试使html表行可折叠。以下是我到目前为止所尝试的，但我没有得到预期的结果。我不知道我做错了什么，感谢任何帮助。这是Html代码：

<body>
<div class="navbar">
  <a href="#" target="_blank">Option A</a>
  <a href="#" target="_blank">Option B</a>
  <a href="RmsLogoutServlet">Logout</a>
</div><br>
<div class="divtabletree" id="divtabletree"></div>
</body>

这是JavaScript和jquery Code，通过对＆＃34; ExampleServlet ＆＃34;进行ajax调用，以表格格式显示数据库中的数据servlet的。我认为问题仅在于下面的代码，因为数据显示正确，它只是在这里不起作用的行可折叠的东西。

$(document).ready(function()
{
    var tkid;
    var id;
    var datatable = '<table id="datatable" class="datatable"><tr><th>Part No.</th><th>Description</th><th>Data Sheet</th><th>Order Link</th><th></th></tr>';
    $.ajax
    ({
        url: "ExampleServlet",              
        type: "POST",
        data: JSON.stringify(id),
        dataType: "json",
        success: function(json) 
        {                
            var info1=json.JSonDataFinal;   
            $.each(info1, function(index, element) 
            {
                var info = element.JsonData;
                var tabletemp;
                var tablerows;
                var tablerowssub;
                $.each(info, function(index, element) 
                {   
                    if(tkid!=element.tokenid)
                    {
                        datatable = datatable + '<tr class=header><td colspan=5>Header</td></tr>';
                        datatable = datatable + '<tr><td>'+element.partno+'</td><td>'+element.description+'</td><td>'+element.datasheet+'</td><td>'+element.orderlink+'</td><td>'+element.tokenid+'</td></tr>';
                        tkid = element.tokenid;
                    }
                    else
                    {
                        datatable = datatable + '<tr><td>'+element.partno+'</td><td>'+element.description+'</td><td>'+element.datasheet+'</td><td>'+element.orderlink+'</td><td>'+element.tokenid+'</td></tr>';
                    }                   
                });
            });
            datatable = datatable + '</table>'
            $("#divtabletree").append(datatable);
        },
        error: function()
        {
            ;
        }
    });
});
$(document).ready(function()
{
    $('tr').hide().filter(function () 
    {
        return $(this).find('td[colspan]').length;
    }).addClass('header').css('display', 'table-row').click(function () 
        {
            $(this).nextUntil('tr.header').css('display', function (i, v) 
            {
                return this.style.display === 'table-row' ? 'none' : 'table-row';
            });
        });
});

这里的问题是当我点击标题行时没有任何反应。标题行下方的行直到下一个标题行应该在标题行上单击时切换。

带有可折叠行的{html}

0 个答案: