根据表值JavaScript创建可折叠面板

Question

我正在尝试根据表自动创建一个单独的面板。我有一个工作清单，我希望面板标头成为我的Jobname字段，我希望面板内容成为我的JobDescription字段。我想使用约30个作业，而不是编码每个面板，而是想使用JavaScript自动创建每个面板。工作改变了，我们的员工知道如何更新工作，但是我试图将它们显示在自举手风琴小组中。

我对Java脚本进行了新颖，我尝试过的一切都没有起作用。

以下是我试图自动完成的

Jobspanels

Answer 1

我将假设您的数据存储在远程位置以允许第三方编辑，并且如果您的页面上有bootstrap，则使用jQuery。

首先，您需要某种方法将远程数据获取到客户端。jQuery有一些方便的方法可以做到这一点。如果您的数据以JSON格式访问，则可以查看$.getJSON，否则您将不得不使用$.ajax。

。

然后，您要做的就是通过做一些HTML建筑物并将结果附加到您的容器中，将数据放在页面上。如果正确获得标记，则Bootstrap手风琴功能应在开箱即用。

这是我所能获得的，没有看到一些代码或了解您的实现，但这是实现您想要的一般方法。

Answer 2

您将需要包含Jobnames和JobDeScriptions的某种列表。可以将其存储在JSON或一个数组中。然后，通过循环浏览数据，您可以通过首先构建每个面板的HTML字符串并连接Jobnames和JobDeScriptions，将每个面板动态地附加到手风琴容器中。我在JSFIDDLE上举了一个示例-https：//jsfiddle.net/7ayh8ppd/12/`

        <div class="panel-group" id="accordion">
        </div> 

    <script>
        var jobList = ["Job1", "Job2", "Job3", "Job4", "Job5"];
        var html = ""
        $.each(jobList, function (index, value) {
            html += "<div class="panel panel-default">";
            html += "       <div class="panel - heading">";
            html += "           <h4 class="panel - title">";
            html += "               <a data-toggle="collapse" data-parent="#accordion" href="#collapse"+index+1+"">"+value+"</a>";
            html += "           </h4>";
            html += "       </div>";
            html += "       <div id="collapse"+index+1+"" class="panel - collapse collapse">";
            html += "           <div class="panel - body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,";
            html += "               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,";
            html += "               quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>";
            html += "       </div>";
            html += "   </div>";
        });
        $("#accordion").append(html);
    </script>`