基于表格值Javascript创建可折叠面板

Question

我正在尝试根据表格自动创建一个单独的面板。我有一个工作列表，我希望面板标题成为我的 jobName 字段，并且我希望面板内容成为我的 jobDescription 字段。我们有大约 30 个工作需要显示，而不是编码每个面板，我想使用 javascript 来自动创建每个面板。工作发生变化，我们的员工知道如何更新工作，但我正试图在引导手风琴面板中显示它们。

我对 java 脚本很陌生，我尝试过的一切都没有奏效。

下面是我试图自动完成的事情

jobsPanels

Answer 1

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

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

然后，您所要做的就是将数据放在页面上，方法是执行一些HTML building fun 并将结果附加到您的容器中。如果标记正确，则引导手风琴功能应该开箱即用。

这是我在没有看到一些代码或不知道你的实现的情况下所能得到的那样具体，但这将是实现你想要的一般方法。

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>`