Javascript 使用JQuery动态创建不同的表_Javascript_Jquery_Html

Javascript 使用JQuery动态创建不同的表

javascript jquery html

Javascript 使用JQuery动态创建不同的表,javascript,jquery,html,Javascript,Jquery,Html,我正在编写一个代码，在这个代码中，我需要动态创建表。在这里，SO的一位专家帮助我创建了它们，但在这里，我希望分别创建表现在好像 <table> <tr> <th></th> <th></th> <th></th> </tr> <tr> <td></td> <td></td> <td></td> </

我正在编写一个代码，在这个代码中，我需要动态创建表。在这里，SO的一位专家帮助我创建了它们，但在这里，我希望分别创建表

现在好像

<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

但我想把它当作

  <table>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <table>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <table>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

这是工作小提琴

请让我知道如何修复此问题

谢谢


var myList=[
[{
“产品”：“红酒”，
“单位：”，
“最大值”：“0.575”，
“规则编号”：“1”，
“成分”：“硫酸盐”，
“id”：“2”
}, {
“产品”：“红酒”，
“单位：”，
“最大值”：“10.25”，
“规则编号”：“1”，
“成分”：“酒精”，
“id”：“1”
}, {
“产品”：“红酒”，
“单位：”，
“最大值”：“98.5”，
“规则编号”：“1”，
“成分”：“总二氧化硫”，
“id”：“3”
}],
[{
“产品”：“红酒”，
“单位：”，
“最大值”：“1.98”，
“规则编号”：“3”，
“成分”：“硫酸盐”，
“id”：“8”
}, {
“产品”：“红酒”，
“单位：”，
“最大值”：“81.5”，
“规则编号”：“3”，
“成分”：“总二氧化硫”，
“id”：“9”
}, {
“产品”：“红酒”，
“单位：”，
“最大值”：“10.25”，
“规则编号”：“3”，
“成分”：“酒精”，
“id”：“7”
}],
[{
“产品”：“红酒”，
“单位：”，
“最大值”：“98.5”，
“规则号”：“2”，
“成分”：“总二氧化硫”，
“id”：“6”
}, {
“产品”：“红酒”，
“单位：”，
“最大值”：“0.575”，
“成分”：“硫酸盐”，
“id”：“5”
}, {
“产品”：“红酒”，
“单位：”，
“最大值”：“10.25”，
“规则号”：“2”，
“成分”：“酒精”，
“id”：“4”
}],
[{
“产品”：“红酒”，
“单位：”，
“最大值”：“1.98”，
“规则号”：“4”，
“成分”：“硫酸盐”，
“id”：“11”
}, {
“产品”：“红酒”，
“单位：”，
“最大值”：“155”，
“规则号”：“4”，
“成分”：“总二氧化硫”，
“id”：“12”
}, {
“产品”：“红酒”，
“单位：”，
“最大值”：“10.25”，
“最小”：“8.5”，
“目标州”：“5”，
“min_运算符”：“用下面的代码替换函数，这将解决您的问题
HTML
<body onLoad="buildHtmlTable()">
   <div id="tables-div"></div>
</body>



JS
function buildHtmlTable() {
   for (var i = 0; i < myList.length; i++) {
       var $table = $('<table id="excelDataTable-'+(i+1)+'"  border="1"></table>');
       $('#tables-div').append($table);
       var columns = addAllColumnHeaders(myList[0], (i+1));

       for (var j = 0; j < myList[i].length; j++) {
           var row$ = $('<tr/>');
           console.log(myList[i][j])
           for (var colIndex = 0; colIndex < columns.length; colIndex++) {

               var cellValue =  myList[i][j][columns[colIndex]];

               if (cellValue == null) {
                   cellValue = "";
               }

               row$.append($('<td/>').html(cellValue));
               $("#excelDataTable-"+(i+1)).append(row$)
           }

       }
      $('#tables-div').append('<br />');
}


function addAllColumnHeaders(myList, table_id) {
    var columnSet = [];
    var headerTr$ = $('<tr/>');

    for (var i = 0; i < myList.length; i++) {
        var rowHash = myList[i];
        for (var key in rowHash) {
            if ($.inArray(key, columnSet) == -1) {
                columnSet.push(key);
                headerTr$.append($('<th/>').html(key));
            }
        }
    }
    $("#excelDataTable"+table_id).append(headerTr$);

    return columnSet;
  }
}

函数buildHtmlTable（）{
对于（变量i=0；i'）；
}
函数addAllColumnHeaders（myList，表id）{
var columnSet=[]；
var headerTr$=$（''）；
对于（变量i=0；i在我看来没问题。问题是什么？只是缩进？在我的实际输出中，所有内容都在一个表中，但这里我想将数据放在4个不同的表中。基本上，您要做的是为列表中的每个项目创建多个表。为此，您应该创建#excelDataTable a，并向其添加必要的数据，就像您所做的那样我没有将tr，th，td添加到@Ashniu123中，而是直接添加到@Ashniu123中。这就是我无法理解的，如何动态生成表id，然后为该表添加数据。希望它能对您有所帮助！
function buildHtmlTable() {
   for (var i = 0; i < myList.length; i++) {
       var $table = $('<table id="excelDataTable-'+(i+1)+'"  border="1"></table>');
       $('#tables-div').append($table);
       var columns = addAllColumnHeaders(myList[0], (i+1));

       for (var j = 0; j < myList[i].length; j++) {
           var row$ = $('<tr/>');
           console.log(myList[i][j])
           for (var colIndex = 0; colIndex < columns.length; colIndex++) {

               var cellValue =  myList[i][j][columns[colIndex]];

               if (cellValue == null) {
                   cellValue = "";
               }

               row$.append($('<td/>').html(cellValue));
               $("#excelDataTable-"+(i+1)).append(row$)
           }

       }
      $('#tables-div').append('<br />');
}


function addAllColumnHeaders(myList, table_id) {
    var columnSet = [];
    var headerTr$ = $('<tr/>');

    for (var i = 0; i < myList.length; i++) {
        var rowHash = myList[i];
        for (var key in rowHash) {
            if ($.inArray(key, columnSet) == -1) {
                columnSet.push(key);
                headerTr$.append($('<th/>').html(key));
            }
        }
    }
    $("#excelDataTable"+table_id).append(headerTr$);

    return columnSet;
  }
}