我们可以在jquery中使用for循环动态创建多个HTML表吗

Question

我想动态创建 html 表，表的数量将取决于我在数组中得到的响应。每 6 个元素后应创建新表，表头将是数组元素本身。 预期输出是-

-------------------------------------
| th1 | th2 | th3 | th4 | th5 | th6 |
-------------------------------------
|     |     |     |     |     |     |
-------------------------------------

生成表格的代码如下，其中控制台打印正常，但元素没有被创建，也没有出现任何错误。

'<div id="findingDiv">';

    for(var i=0;i<tables;i++){
         console.log('i-',i);                               
        '<table class="table table-bordered" style="margin-top: 10px; border:1px solid black; border-collapse : collapse;font-size: 30px;">'+
            '<thead>'+
                '<tr>';

                for(var k=0;k<6;k++){   

                    '<th id="header" style="color:black; font-size: 12px; border:1px solid black; text-align:center;border-color: rgb(166, 166, 166);"> historyTable[k] </th>';
                    console.log('k-',k);
                }

       '</table> \n';                               
    }

有人可以帮帮我吗？

我已经检查了以前没有用的解决方案。 How to clone() a element n times? How to use loop in Jquery to add table multiple times into div Create a table dynamically using for loop in .html()

Answer 1

您可以使用 jQuery .append() 方法在for 循环中动态地将HTML 表添加到您的DIV。

Working fiddle

您可以使用以下代码。

在 html 中的 DIV 下方：

<div id="findingDiv">
</div>

jquery 中的代码。我使用 jQuery .ready() 方法在页面加载时创建它：

$(document).ready(function () {
    var tables = ['th1','th2','th3','th4','th5','th6']

    for(var i=0;i<tables.length;i++){
    var content = "<table><thead><tr>";
        for(var k=0;k<6;k++)
        {
            content += '<th id="header" style="color:black; font-size: 12px; border:1px solid black; text-align:center;border-color: rgb(166, 166, 166);">'+tables[k]+' </th>';                    
        }
        content += "</tr></thead></table><br/>";
        $('#findingDiv').append(content);
    }
 });

我刚刚添加了th，您也可以添加tr。