Создать сборную панель на основе значений таблицы Javascript

Question

Я пытаюсь создать отдельную панель автоматически на основе таблицы. У меня есть список заданий, я хочу, чтобы заголовок панели был моим полем jobName, и я хочу, чтобы содержимое панели было моим полем JobDescription. У нас около 30 заданий, которые мне нужно отображать, а не кодировать каждую панель, я бы хотел использовать javascript для автоматического создания каждой панели. Рабочие места меняются, и наш персонал знает, как обновлять задания, но я пытаюсь отобразить их на панели саундтрека.

Я новичок в java-скрипте, и все, что я пробовал, не сработало.

Ниже то, что я пытаюсь выполнить автоматически

jobsPanels

Answer 1

Я собираюсь предположить, что данные хранятся в удаленном месте, чтобы разрешить редактирование третьих сторон, и что вы используя jQuery, если у вас есть загрузочная страница на вашей странице.

Во-первых, вам понадобится способ получения удаленных данных клиенту. У jQuery есть некоторые удобные методы для этого. Если ваши данные доступны в формате JSON, вы можете взглянуть на $.getJSON, иначе вам придется поиграть с $.ajax.

Затем все, что вам нужно сделать, это поместить данные на страницу, выполнив HTML building fun и добавив результаты в ваш контейнер. Если вы получите правильную разметку, функциональность бутстрапа-аккордеона должна работать из коробки.

Это так, как я мог бы получить, не видя какого-либо кода или не зная о вашей реализации, но это был бы общий способ добиться того, чего вы хотите.

Answer 2

Вам понадобится список какого-либо рода, содержащий имя_имени и jobDescriptions. Это можно сохранить в JSON или массиве. Затем, перебирая данные, вы можете динамически присоединить каждую панель к контейнеру аккордеона, сначала построив строку html для каждой панели и связав имена и задания jobDames. Я сделал пример на 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>`