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()方法在HTML循环中将DIV表格添加到for dynamicaly。

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。

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

1 个答案: