Java 使用引导折叠行-动态大表-仅折叠第一行

我正在创建一个表，希望每行都有折叠细节。我可以让它在表格的第一行工作，但是对于其后的每一行，按钮都不会切换。我的代码如下。我知道我可能在这里遗漏了一些非常简单的东西，但我对web开发还相当陌生。感谢您的帮助

.js

---

for（var z=0；z将此
$（'collapse'）.collapse（{toggle:false}）；
更改为此
$（'.collapse'）.collapse（{toggle:false}）；
（您忘记了“.”使其成为类选择器）@Ted更改后，我的第一行现在不会折叠或展开，以后也不会折叠或展开…如果没有呈现的代码，很难判断出哪里出了问题。无论如何，你可以用小提琴之类的方式提供它？另外，将jQuery放在你的循环之外
for (var z=0;z<documentData.length;z++) {
                    $("#documents-result-table > tbody").append(
                        "<tr>" + 
                            "<td>" + documentData[z].documentIdocNumber + "</td>" +
                            "<td>" + documentData[z].docNumber + "</td>" +
                            "<td>" + documentData[z].documentType + "</td>" +
                            "<td>" + documentData[z].status + "</td>" +
                            "<td>" + documentData[z].createdDate + "</td>" +
                            "<td>" + documentData[z].modifiedDate + "</td>" +                               
                            "<td>" + documentData[z].customerId + "</td>" +
                            "<td>" + documentData[z].customerName + "</td>" +
                            "<td><a target=\"_blank\" href=\"" + contextPath + "/viewPdf.do?documentIdocNumber=" + documentData[z].documentIdocNumber + "\" class=\"glyphicon glyphicon-eye-open\"></a></td>" +
                            "<td><a target=\"_blank\" href=\"" + contextPath + "/saveBak.do?documentIdocNumber=" + documentData[z].documentIdocNumber + "\" class=\"glyphicon glyphicon-floppy-save\"></a></td></tr>"
                            + "<tr class=\"collapse\" id=\"collapseme\">" +
                            "<td></td><td colspan=\"9\"><table  class=\"table table-striped table-curved\"><tr><th>Customer Id</th><th>Customer Name</th><th>Billing Plant</th><th>Country Code</th><th>Routing Code</th><th>Language</th></tr>" +
                            "<tr>" +
                            "<td>" + documentData[z].customerId + "</td>" +
                            "<td>" + documentData[z].customerName + "</td>" +
                            "<td>" + documentData[z].billingPlant + "</td>" +
                            "<td>" + documentData[z].countryCode + "</td>" +
                            "<td>" + documentData[z].routingCode + "</td>" +
                            "<td>" + documentData[z].language + "</td></tr>" +
                            "</table></td></tr>");

                        $('.collapse').collapse({toggle: false});
                        $('button span').click(function() {
                            $("#collapseme").collapse("toggle");
                            var span = $('button span').hasClass('glyphicon-chevron-down');
                            if(span){
                                $(".glyphicon-chevron-down").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-right");
                            }
                            else{      
                                $(".glyphicon-chevron-right").removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-down");
                            }
                        });