如何实现点击切换并以4列表格动态填充JavaScript数组内容

现有两个JavaScript数组：

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

需要实现：点击对应图片时，将对应数组内容填充到class为myTable的表格中，表格采用4列布局。当前代码仅能以1列形式显示，现有HTML结构如下：

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

现有需调整的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);
}

要实现4列布局，核心逻辑是每4个数组元素生成一行表格，以下是完整的修改方案：

1. 完善HTML结构（添加触发图片） #

首先需要添加用于触发切换的图片元素，通过data-target标记对应要加载的数组：

<!-- 点击这两张图片分别加载对应数组 -->
<img src="animals-icon.png" alt="显示动物列表" class="trigger-btn" data-target="animals">
<img src="food-icon.png" alt="显示食物列表" class="trigger-btn" data-target="food">

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

2. 重构JavaScript代码 #

修改后的代码会处理点击事件，并按4列一行的规则渲染表格内容：

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"];

const $table = $('.myTable');
// 映射数组名称与对应数组，方便快速获取目标数据
const dataSource = { animals, food };

// 绑定图片点击事件
$('.trigger-btn').on('click', function() {
    const targetArray = dataSource[$(this).data('target')];
    if (!targetArray) return;

    $table.empty(); // 清空表格原有内容
    let currentRow = '';

    for (let i = 0; i < targetArray.length; i++) {
        // 每4个元素开启新行
        if (i % 4 === 0) {
            // 若不是第一行，先把上一行插入表格
            if (i !== 0) {
                $table.append(currentRow + '</tr>');
                currentRow = '';
            }
            currentRow = '<tr>';
        }

        // 添加当前元素的单元格
        currentRow += `<td>${targetArray[i]}</td>`;

        // 处理最后一行：循环结束时插入剩余内容
        if (i === targetArray.length - 1) {
            // 可选：补全空单元格，保证每行严格4列
            const emptyCellsNeeded = 4 - (targetArray.length % 4);
            if (emptyCellsNeeded !== 4) {
                for (let j = 0; j < emptyCellsNeeded; j++) {
                    currentRow += '<td></td>';
                }
            }
            $table.append(currentRow + '</tr>');
        }
    }
});

关键逻辑说明 #

• 数据源映射：用dataSource对象关联数组名称和数组本身，通过点击元素的data-target直接获取要渲染的数组，避免冗余判断
• 行生成规则：利用i % 4 === 0判断是否需要创建新行，每4个元素完成一行的拼接并插入表格
• 空单元格补全：可选逻辑，如果需要每行必须是4列，在最后一行元素不足时补充空单元格；不需要的话可以删除这部分代码
• 点击交互：每次点击图片先清空表格，再重新渲染对应数组的内容，避免内容叠加

内容的提问来源于stack exchange，提问作者direktor