javascript动态表格填充答案

【问题标题】：javascript dynamic table fillingjavascript动态表格填充
【发布时间】：2022-12-19 18:23:01
【问题描述】：

我有多个数组可以说：

var animals = ["牛","马","兔子","大象","驴","猴子","斑马"]; var food = ["苹果","香蕉","梨","甜瓜","葡萄","桃子","菠萝"];

我想动态地将其放入 4 列表中。如果单击动物图片，动物数组将填满表格，如果单击食物，则食物数组将填满表格。

所以，假设我有

然后需要javascript

import $ from "https://cdn.skypack.dev/jquery@3.6.1";
var animals = ["cow","horse","rabbit","elephant","donkey","monkey","zebra"];
var food = ["apple","banana","pear","melon","grape","peach","pineapple"];

var $table = $('.myTable');
    for (var i = 0; i < food.length; i++){
      var $aSingleContent = '<tr><td>'+food[i]+'</td></tr>';
      $table.append($aSingleContent);
    }

这将在 1 列中显示所有食品。现在我需要将其除以 4 - 因为连续 4 列

【问题讨论】：

标签： javascript html jquery html-table

【解决方案1】：

因为 <tr> 在行 var $aSingleContent = '<tr><td>'+food[i]+'</td></tr>'; 使你的 javascript 为数组中的每个元素创建一个新行。我们需要继续计算填充一行的数据量。如果一行有 4 列columnCount === 4，那么我们创建一个新行。

const food = ["apple","banana","pear","melon","grape","peach","pineapple"];
    
const $table = $('.myTable');
let $aSingleContent = "<tr>", columnCount = 0;
for (var i = 0; i < food.length; i++){
    if(columnCount === 4) {
        columnCount = 0;
        $aSingleContent += '</tr><tr>';
    }
    $aSingleContent += '<td>'+food[i]+'</td>';
    columnCount++;
}
$aSingleContent += "</tr>"
$table.append($aSingleContent);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="myTable" border></table>

【讨论】：

好的。如果使用if(i > 0 && i % 4 === 0)，则可以跳过 columnCount

【解决方案2】：

你可以试试这个：

window.onload = function() {
    var animals = ["cow","horse","rabbit","elephant","donkey","monkey","zebra"];
    var food = ["apple","banana","pear","melon","grape","peach","pineapple"];
    var table = document.getElementById("table");
    var i = 0, r = 0;
    while(i < animals.length) {
      var row = table.insertRow(r);
      for (var c = 0; c < 4; c++) {
        var cell = row.insertCell(c);
        cell.appendChild(document.createTextNode(animals[i] ? animals[i] : ''));
        i++;
      }
      r++;
    }
    document.body.appendChild(table);
}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="table" cellpadding="1" cellspacing="1">
</table>

希望这有帮助！

【讨论】：

【解决方案3】：

您可以结合使用 % 运算符和 Math.ceil 函数来计算表中的行数并相应地创建新的表行。这是一个例子：

import $ from "https://cdn.skypack.dev/jquery@3.6.1";

var animals = ["cow","horse","rabbit","elephant","donkey","monkey","zebra"];
var food = ["apple","banana","pear","melon","grape","peach","pineapple"];

var $table = $('.myTable');

// Calculate the number of rows needed for the table
var rows = Math.ceil(food.length / 4);

// Create a new table row every 4 items
for (var i = 0; i < food.length; i++) {
  if (i % 4 == 0) {
    $table.append('<tr></tr>');
  }

  // Append a new table cell to the current row
  var $currentRow = $table.find('tr:last-child');
  $currentRow.append('<td>' + food[i] + '</td>');
}

这将创建一个包含 4 列和必要行数的表格，以显示食物数组中的所有项目。您可以修改此代码以在动物和食物数组之间切换，具体取决于您希望在表格中显示哪一个。

【讨论】：

【解决方案4】：

如果你的food数组比你提供的多，你可以使用这个。

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.1.slim.min.js" integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA=" crossorigin="anonymous"></script>
</head>
<body>

<table class="myTable" border="1">
</table>

<script>
 
var animals = ["cow","horse","rabbit","elephant","donkey","monkey","zebra"];
var food = ["apple","banana","pear","melon","grape","peach","pineapple", "a","b","c","d"];


var $table = $('.myTable');
    
    var $aSingleContent = '';
    var to = 0;
    var from = 3;
    for (var i = 0; i < food.length; i++){
 
      if (i==to)
      { $aSingleContent += '<tr>'; }
      $aSingleContent += '<td>'+food[i]+'</td>';
      if (i==from)
      { 
        $aSingleContent += '</tr>'; 
        to = to + 4;
        from = from + 4;
      }  
    }
    
    $table.append($aSingleContent);
</script>

</body>
</html>

【讨论】：