は、私は次の属性を持つHTMLテーブルを持っているjqueryの

Question

で複数のHTMLテーブルを作成します。

<h1 id="tableTitle"></h1> 
    <div style="overflow-x: auto; white-space: nowrap; height:305px"> 
    <table id="render_${pluginId}" border="1" style="width: 100%" class="testRunTable"> 
     <tr> 
      <th id="tableHeader">Test Types</th> 
      <th id="tableHeader"># of Tests</th> 
      <th id="tableHeader"># of Approved <br> Test Designs</br></th> 
      <th id="tableHeader"># Executed</th> 
      <th id="tableHeader"># Passed</th> 
      <th id="tableHeader">% Executed</th> 
      <th id="tableHeader">% Passing <br> (of Executed)</th> 
      <th id="tableHeader"># Blocked</th> 
      <th id="tableHeader"># Failed</th> 
      <th id="tableHeader"># Defects<br> Opened</br> </th> 
      <th id="tableHeader"># Defects<br> Resolved</br></th> 
      <th id="tableHeader"># Technical<br> Debt</br> </th> 
     </tr> 
    </table> 
    </div> 

を私は動的にループを使用して、この同じテーブルを作成するためにjqueryの関数が必要です。どんな助けもありがたいです

Answer 1

ここに解決策があります。

jquery cloneメソッドを使用する必要があります。その後、divにappendが必要です。

for(var i = 0; i < 10; i++){ 
 
    $('div').append($('table').eq(0).clone()); 
 
    //or this: $('div').append($('table:first').clone()); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 id="tableTitle"></h1> 
 
    <div style="overflow-x: auto; white-space: nowrap; height:305px"> 
 
    <table id="render_${pluginId}" border="1" style="width: 100%" class="testRunTable"> 
 
     <tr> 
 
      <th id="tableHeader">Test Types</th> 
 
      <th id="tableHeader"># of Tests</th> 
 
      <th id="tableHeader"># of Approved <br> Test Designs</br></th> 
 
      <th id="tableHeader"># Executed</th> 
 
      <th id="tableHeader"># Passed</th> 
 
      <th id="tableHeader">% Executed</th> 
 
      <th id="tableHeader">% Passing <br> (of Executed)</th> 
 
      <th id="tableHeader"># Blocked</th> 
 
      <th id="tableHeader"># Failed</th> 
 
      <th id="tableHeader"># Defects<br> Opened</br> </th> 
 
      <th id="tableHeader"># Defects<br> Resolved</br></th> 
 
      <th id="tableHeader"># Technical<br> Debt</br> </th> 
 
     </tr> 
 
    </table> 
 
    </div>

Answer 2

それはclone()、テーブルを取得し、あなたのページに追加します。

例：

for (var i = 0; i < 10; ++i) { 
    $('body').append($('#tableTitle').clone()); 
}