Javascript 具有可折叠行的html表_Javascript_Jquery

Javascript 具有可折叠行的html表

javascript jquery

Javascript 具有可折叠行的html表,javascript,jquery,Javascript,Jquery,我试图使html表行可折叠。以下是我迄今为止所做的尝试，但我没有得到预期的结果。我不知道我哪里做错了，谢谢你的帮助。这是Html代码： <body> <div class="navbar"> <a href="#" target="_blank">Option A</a> <a href="#" target="_blank">Option B</a> <a href="RmsLogoutServlet

我试图使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代码，通过ajax调用“ExampleServlet”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';
            });
        });
});

$（文档）.ready（函数（）
{
var tkid；
变量id；
var datatable='零件号说明数据表订单链接'；
$.ajax
({
url:“ExampleServlet”，
类型：“POST”，
数据：JSON.stringify（id），
数据类型：“json”，
成功：函数（json）
{                
var info1=json.JSonDataFinal；
$.each（info1，函数（索引，元素）
{
var info=element.JsonData；
var表温；
var表格行；
var表ROWSSUB；
$。每个（信息、功能（索引、元素）
{   
if（tkid！=element.tokenid）
{
datatable=datatable+“标题”；
datatable=datatable+''+元素.partno+''+元素.description+''+元素.datasheet+''+元素.orderlink+''+元素.tokenid+''；
tkid=element.tokenid；
}
其他的
{
datatable=datatable+''+元素.partno+''+元素.description+''+元素.datasheet+''+元素.orderlink+''+元素.tokenid+''；
}                   
});
});
datatable=datatable+“”
$（“#divtabletree”）.append（数据表）；
},
错误：函数（）
{
;
}
});
});
$（文档）.ready（函数（）
{
$（'tr'）.hide（）.filter（函数（）
{
返回$（this.find（'td[colspan]'）.length；
}).addClass（'header'）.css（'display'，'table row'）。单击（函数（）
{
$（this）.nextUntil（'tr.header'）.css（'display'，function（i，v）
{
返回this.style.display==‘表行’？‘无’：‘表行’；
});
});
});

这里的问题是，当我点击标题行时，什么都没有发生。

其中，当单击标题行时，应切换标题行下的行直到下一个标题行。

“未发生任何事情”不是一个非常描述性的错误描述。你试过调试你的代码吗？就像使用浏览器开发人员工具检查是否更改了

显示

属性，或者是否调用了click listener？我尝试过调试，只有在浏览器中调试时才能正常工作。如果直接运行相同的代码，则无法正常工作。看起来没有调用click listener！我如何处理这个问题？有什么建议吗？