创建使用jQuery

Question

多个HTML表我有一个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方法即可。然后你必须append到你的div。

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()); 
}