Question

我正在编写代码，我需要动态创建表。在这里，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>

这是工作小提琴。 http://jsfiddle.net/9r6a1uby/2/

请告诉我如何解决此问题。

由于

Answer 1

 <!DOCTYPE html>
 <html>
 <head>
    <title></title>
    <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
 </head>
 <body  onLoad="buildHtmlTable()">
    <div id="excelDataTable">

    </div>

    <script type="text/javascript">

 var myList = [
  [{
    "product": "Red Wine",
    "unit": " ",
    "max": "0.575",
    "ruleNo": "1",
    "ingredients": "sulphates",
    "id": "2"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "10.25",
    "ruleNo": "1",
    "ingredients": "alcohol",
    "id": "1"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "98.5",
    "ruleNo": "1",
    "ingredients": "total sulfur dioxide",
    "id": "3"
  }],
  [{
    "product": "Red Wine",
    "unit": " ",
    "max": "1.98",
    "ruleNo": "3",
    "ingredients": "sulphates",
    "id": "8"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "81.5",
    "ruleNo": "3",
    "ingredients": "total sulfur dioxide",
    "id": "9"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "10.25",
    "ruleNo": "3",
    "ingredients": "alcohol",
    "id": "7"
  }],
  [{
    "product": "Red Wine",
    "unit": " ",
    "max": "98.5",
    "ruleNo": "2",
    "ingredients": "total sulfur dioxide",
    "id": "6"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "0.575",
    "ingredients": "sulphates",
    "id": "5"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "10.25",
    "ruleNo": "2",
    "ingredients": "alcohol",
    "id": "4"
  }],
  [{
    "product": "Red Wine",
    "unit": " ",
    "max": "1.98",
    "ruleNo": "4",
    "ingredients": "sulphates",
    "id": "11"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "155",
    "ruleNo": "4",
    "ingredients": "total sulfur dioxide",
    "id": "12"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "10.25",
    "min": "8.5",
    "target_state": "5",
    "min_operator": "<=",
    "max_operator": " ",
    "target_parameter": "Quality",
    "ruleNo": "4",
    "ingredients": "alcohol",
    "id": "10"
  }]
];

// Builds the HTML Table out of myList json data from Ivy restful service.
function buildHtmlTable() {
  for (var i = 0; i < myList.length; i++) {
    var columns = addAllColumnHeaders(myList[0], i);

    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));
      }
      $("#table-id-"+i).append(row$);
    }
  }

  // Adds a header row to the table and returns the set of columns.
  // Need to do union of keys from all records as some records may not contain
  // all records
  function addAllColumnHeaders(list, i) {
    var columnSet = [];
    var headerTr$ = '<table id="table-id-'+i+'"><thead><tr>';
    for (var i = 0; i < list.length; i++) {
      var rowHash = list[i];
      for (var key in rowHash) {
        if ($.inArray(key, columnSet) == -1) {
          columnSet.push(key);
          headerTr$ += '<th>' + key + '</th>';
        }
      }
    }

    headerTr$ += '</tr></thead></table>';
    console.log(headerTr$);
    $("#excelDataTable").append(headerTr$);
    return columnSet;
  }
}


    </script>
 </body>
 </html>

Answer 2

使用下面的代码替换您的功能，这应该可以解决您的问题

<强> 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;
  }
}

使用JQuery动态创建不同的表

2 个答案: