Question

我将数据存储在数组中，从数组中创建带循环的表。对于一个表，我需要两列，另外30列（取决于数组项）。这将有三列。

var prodej = [
  /*First column, second, third column*/
  ["Jack", 100, 101],
  ["Bkack", 100, 5],
  ["Duck", 100, 9],
];

这是我的循环

for ( var i = 0; prodej.length > i; i += 1) {
  var tr = '<tr>'
  var td1 = '<td>' + prodej[i][0]; + '</td>'
  var td2 = '<td>' + prodej[i][1]; + '</td>'
  var td3 = '<td>' + prodej[i][2]; + '</td>'
  tr += td1 + td2 + td3 + '</tr>'
  $("#firstTable").append(tr);
}

这是另一个数组和循环

var another = [

  ["Buick", 100],
  ["Ford", 100],
  ["Nissan", 100],
];

for ( var i = 0; another.length > i; i += 1) {
  var tr = '<tr>'
  var td1 = '<td>' + another[i][0]; + '</td>'
  var td2 = '<td>' + another[i][1]; + '</td>'
  tr += td1 + td2 +  '</tr>'
  $("#secondTable").append(tr);
}

我看到很多相同的代码，但我不知道我能做些什么只能有一个循环。目标是

获取内部数组的长度并基于它在tr
根据阵列名称创建唯一ID

Answer 1

您可以编写一个将数组和id作为参数的函数。使用嵌套循环创建单元格。

 createTable(prodej, 'firstTable');
 createTable(another, 'secondTable');

然后，当您想要创建表时，可以调用此函数：

<html>
  <head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
  </head>
  <body>

  <div class="your-class">
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
  </div>

  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="slick/slick.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $('.your-class').slick({
        setting-name: setting-value
      });
    });
  </script>

  </body>
</html>

Answer 2

您可以使用table api：

function populateTable(table, rowsData) {
  rowsData.forEach(function(rowData) {
    var row = table.insertRow();

    rowData.forEach(function(cellData) {
      var cell = row.insertCell();

      var text = document.createTextNode(cellData);

      cell.appendChild(text);
    });
  });
}

var prodej = [
  ["Jack", 100, 101],
  ["Bkack", 100, 5],
  ["Duck", 100, 9]
];

var table1 = document.getElementById('table1');

populateTable(table1, prodej);

var another = [
  ["Buick", 100],
  ["Ford", 100],
  ["Nissan", 100]
];
var table2 = document.getElementById('table2');

populateTable(table2, another);

<table id="table1"></table>

<br />

<br />

<table id="table2"></table>

Answer 3

您可以编写一个函数来测试数组的长度，然后是数组当前元素的长度。然后，您可以重复使用函数传递一个数组和一个表来追加它。

var prodej = [
    /*First column, second, third column*/
    ["Jack", 100, 101],
    ["Bkack", 100, 5],
    ["Duck", 100, 9],
];

var another = [
    ["Buick", 100],
    ["Ford", 100],
    ["Nissan", 100],
];
var myTable = $('#firstTable');

DRYLoop(another, myTable);

function DRYLoop(array, table) {

    for (var i = 0; array.length > i; i += 1) {
        table.append('<tr>');

        for (var d = 0; d < array[i].length; d++) {
            table.append('<td>' + array[i][d] + '</td>');
        }
        table.append('</tr>');
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="firstTable">

</table>

DRY - 创建表的循环

3 个答案: