テーブル値に基づいて折りたたみパネルを作成するJavascript

Question

テーブルに基づいて別々のパネルを自動的に作成しようとしています。私は仕事リストを持っています、私はパネルの見出しを私のjobNameフィールドにしたい、パネルの内容を私のjobDescriptionフィールドにします。私は表示する必要がある約30の仕事があり、各パネルをコーディングするのではなく、javascriptを使用して各パネルを自動的に作成したいと考えています。ジョブが変わり、私たちのスタッフはジョブの更新方法を知っていますが、私はそれらをブートストラップアコーディオンパネルに表示しようとしています。

私はJavaスクリプトに新しくて、私が試したことはすべてうまくいきませんでした。

以下

iが自動的に

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