利用JS把数组里面的数据自动生成table表格（5个一行）

功能介绍：利用JS语法把数组里面的数据自动生成table表格，并且每行5个一行，如果当前行已经添加了5个名字，则开始新的一行，下面给大家介绍一下具体实现代码！

js原生代码如下：

var names = ['诗聪','福昌','虞璐','珊璐','旭恩','凯皓','誉宣','怡梵','厚彪','润书','朗雨','钧虎','祺韬','修炎','翰臣','嘉俊','硕勤','艺炜']

// 创建表格元素  
const table = document.createElement('table'); 

// 合并相邻的边框  
table.style.borderCollapse = 'collapse'; 
  
// 每行显示5个名字  
const namesPerRow = 5;

// 创建当前行    
let currentRow = document.createElement('tr');
  
// 循环遍历名字数组  
for (let i = 0; i < names.length; i++) {  
  // 添加名字到当前行的单元格中  
  const cell = document.createElement('td');  
  cell.textContent = names[i];  
  currentRow.appendChild(cell);  
  
  // 如果当前行已经添加了5个名字，则开始新的一行  
  if ((i + 1) % namesPerRow === 0) {  
    table.appendChild(currentRow); // 将当前行添加到表格中  
    currentRow = document.createElement('tr'); // 创建新的行  
  }  
}  
  
// 如果最后一行名字数量不足5个，仍然需要将其添加到表格中  
if (currentRow.childNodes.length > 0) {  
  table.appendChild(currentRow);  
}  
  
// 将表格添加到HTML文档中  
document.body.appendChild(table);

输出结果如下：

<table style="border-collapse: collapse;">
  <tr><td>诗聪</td><td>福昌</td><td>虞璐</td><td>珊璐</td><td>旭恩</td></tr>
  <tr><td>凯皓</td><td>誉宣</td><td>怡梵</td><td>厚彪</td><td>润书</td></tr>
  <tr><td>朗雨</td><td>钧虎</td><td>祺韬</td><td>修炎</td><td>翰臣</td></tr>
  <tr><td>嘉俊</td><td>硕勤</td><td>艺炜</td></tr>
</table>

如何利用js语法将2个数组进行交叉合并

利用js语法把数组根据相同key转换成嵌套数组格式

jQuery语法如何对table表格添加行操作（点击按钮添加行）

jQuery语法如何实现table隔行交替背景色（具体代码介绍）

jQuery语法如何实现表格隔行变色效果

标签： js语法, table表格

上面是“利用JS把数组里面的数据自动生成table表格（5个一行）”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_14420.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！