1. Python技术站首页
  2. 其他
  3. JavaScript

JS实现动态生成html table表格的方法分析

• JavaScript

下面是详细的讲解：

简介

HTML table是用来展示网页数据的一种常用的视觉元素。通常，web程序员会手写HTML代码来创建一个table元素，但是对于动态生成表格，使用JavaScript来操作DOM可能会更加简单。本文将讲解如何通过JavaScript来实现动态生成HTML table表格。

实现过程

1. 生成表格内容的数据

我们需要先生成一个包含表格内容的数据集合。这个数据集合可以是一个数组，也可以是一个对象数组，具体的方式根据数据的类型而定。在生成这个数据集合时，需要考虑对数据进行预处理，对于其中的字符串进行转义和编码，以减少XSS攻击的风险。

2. 创建一个HTML table元素

我们可以使用HTMLElement对象的createElement方法来动态地创建一个table元素。在创建table元素后，需要使用appendChild方法将它添加到父元素中。如下所示：

var table = document.createElement('table');
var parent = document.getElementById('parent-element');
parent.appendChild(table);

3. 创建表头

在表格的头部，我们通常需要添加表头，用于描述表格的数据内容。表头通常包括一个或多个表头单元格，可以使用<th>元素来表示。

var table = document.createElement('table');
var parent = document.getElementById('parent-element');
parent.appendChild(table);

var thead = document.createElement('thead');
table.appendChild(thead);

var tr = document.createElement('tr');
thead.appendChild(tr);

var headers = ['Name', 'Age', 'Sex'];  // 表头内容
for (var i = 0; i < headers.length; i++) {
  var th = document.createElement('th');
  th.innerHTML = headers[i];
  tr.appendChild(th);
}

在上面的代码中，我们创建了一个<thead>元素和一个包含3个表头单元格的<tr>元素。然后，我们使用for循环遍历表头内容数组，创建一个包含表头内容的<th>元素，并将其添加到<tr>元素中。

4. 创建表格主体

除去表头的一部分，就是表格的主体了。在表格主体中，我们需要遍历数据集合，并且为每一行数据创建一个数据行。在数据行中，我们需要为每一个单元格都创建一个<td>元素，并将其添加到每一行中。如下所示：

var table = document.createElement('table');
var parent = document.getElementById('parent-element');
parent.appendChild(table);

var thead = document.createElement('thead');
table.appendChild(thead);

var tr = document.createElement('tr');
thead.appendChild(tr);

var headers = ['Name', 'Age', 'Sex'];  // 表头内容
for (var i = 0; i < headers.length; i++) {
  var th = document.createElement('th');
  th.innerHTML = headers[i];
  tr.appendChild(th);
}

var tbody = document.createElement('tbody');
table.appendChild(tbody);

var dataRows = [
  ['小明', 20, '男'],
  ['小红', 18, '女'],
  ['小刚', 22, '男'],
  // ...
];  // 数据集合
for (var i = 0; i < dataRows.length; i++) {
  var tr = document.createElement('tr');
  tbody.appendChild(tr);
  for (var j = 0; j < dataRows[i].length; j++) {
    var td = document.createElement('td');
    td.innerHTML = dataRows[i][j];
    tr.appendChild(td);
  }
}

在上面的代码中，我们首先在table元素中创建一个<tbody>元素。然后，我们使用for循环遍历数据集合中的每一个数据行。 对于每一个数据行，我们先将一个<tr>元素添加到<tbody>元素中。接着，我们再次使用for循环遍历数据行中的每一个单元格，并创建一个<td>元素，将单元格的内容插入到<td>标签内，再将<td>元素添加到该行的<tr>元素中。

5. 创建表格尾部

表格尾部通常用于添加一些统计信息或其他相关的声明。在<tfoot>中创建单元格类似于在其他单元格中创建单元格。如下所示，我们创建了一个包含文本的单元格，并将其添加到一个新创建的<tfoot>元素中。

var table = document.createElement('table');
var parent = document.getElementById('parent-element');
parent.appendChild(table);

var thead = document.createElement('thead');
table.appendChild(thead);

var tr = document.createElement('tr');
thead.appendChild(tr);

var headers = ['Name', 'Age', 'Sex'];  // 表头内容
for (var i = 0; i < headers.length; i++) {
  var th = document.createElement('th');
  th.innerHTML = headers[i];
  tr.appendChild(th);
}

var tbody = document.createElement('tbody');
table.appendChild(tbody);

var dataRows = [
  ['小明', 20, '男'],
  ['小红', 18, '女'],
  ['小刚', 22, '男'],
  // ...
];  // 数据集合
for (var i = 0; i < dataRows.length; i++) {
  var tr = document.createElement('tr');
  tbody.appendChild(tr);
  for (var j = 0; j < dataRows[i].length; j++) {
    var td = document.createElement('td');
    td.innerHTML = dataRows[i][j];
    tr.appendChild(td);
  }
}

var tfoot = document.createElement('tfoot');
table.appendChild(tfoot);

var tr = document.createElement('tr');
tfoot.appendChild(tr);

var td = document.createElement('td');
td.innerHTML = 'Total: 3';
tr.appendChild(td);

在上面的代码中，我们创建了一个<tfoot>元素，将其添加到table元素中。 然后，我们创建一个包含文本“Total: 3”的单元格，并将其添加到新创建的<tfoot>元素中。

示例说明

示例1：生成一个由随机数组成的3X3表格

我们可以通过以下代码来生成一个3X3的表格：

var tableData = [
  [Math.random(), Math.random(), Math.random()],
  [Math.random(), Math.random(), Math.random()],
  [Math.random(), Math.random(), Math.random()]
];

var table = document.createElement('table');
var parent = document.getElementById('parent-element');
parent.appendChild(table);

var thead = document.createElement('thead');
table.appendChild(thead);

var tr = document.createElement('tr');
thead.appendChild(tr);

var headers = ['Col1', 'Col2', 'Col3'];  // 表头内容
for (var i = 0; i < headers.length; i++) {
  var th = document.createElement('th');
  th.innerHTML = headers[i];
  tr.appendChild(th);
}

var tbody = document.createElement('tbody');
table.appendChild(tbody);

for (var i = 0; i < tableData.length; i++) {
  var tr = document.createElement('tr');
  tbody.appendChild(tr);
  for (var j = 0; j < tableData[i].length; j++) {
    var td = document.createElement('td');
    td.innerHTML = tableData[i][j].toFixed(2);
    tr.appendChild(td);
  }
}

示例2：使用JSON数据生成表格

我们可以使用以下代码来生成一个由JSON数据驱动的表格：

var jsonData = [
  {
    "name": "小明",
    "age": 20,
    "sex": "男"
  },
  {
    "name": "小红",
    "age": 18,
    "sex": "女"
  },
  {
    "name": "小刚",
    "age": 22,
    "sex": "男"
  }
];

var table = document.createElement('table');
var parent = document.getElementById('parent-element');
parent.appendChild(table);

var thead = document.createElement('thead');
table.appendChild(thead);

var tr = document.createElement('tr');
thead.appendChild(tr);

var headers = ['Name', 'Age', 'Sex'];  // 表头内容
for (var i = 0; i < headers.length; i++) {
  var th = document.createElement('th');
  th.innerHTML = headers[i];
  tr.appendChild(th);
}

var tbody = document.createElement('tbody');
table.appendChild(tbody);

for (var i = 0; i < jsonData.length; i++) {
  var tr = document.createElement('tr');
  tbody.appendChild(tr);
  var row = [jsonData[i].name, jsonData[i].age, jsonData[i].sex];
  for (var j = 0; j < row.length; j++) {
    var td = document.createElement('td');
    td.innerHTML = row[j];
    tr.appendChild(td);
  }
}

在以上的几个示例中，我们使用了动态的HTML table来进行数据展示。这些方法可以进一步扩展，根据不同的需求去生成不同的表格，如加入一些筛选功能或排序功能等。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现动态生成html table表格的方法分析 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 动态调用CSS文件的JS代码

    动态调用 CSS 文件的 JS 代码是一种在页面加载时引入 CSS 文件的方式，这种方式可以使页面的开发更加灵活，可以根据不同的需求加载不同的 CSS 文件。下面是实现动态调用 CSS 文件的 JS 代码的完整攻略： 创建一个空的 link 元素 在页面中创建一个空的 link 元素，它的 href 属性指向 CSS 文件的路径，rel 属性为 styles…

    JavaScript 2023年6月11日
    00

  • JavaScript淡入淡出渐变简单实例

    下面是JavaScript淡入淡出渐变简单实例的详细攻略。 概述 淡入淡出渐变是一种常见的Web界面交互效果，它可以使网页元素在显示和隐藏时呈现出逐渐淡入或淡出的效果，使用户感受更加柔和、自然。而使用JavaScript实现淡入淡出渐变则是一种相对比较简单的实现方式。本文将针对该主题展开详细说明，包括实现过程、示例说明、以及优化方案等。 实现过程 实现淡入淡…

    JavaScript 2023年6月10日
    00

  • HTML DOM Viewer

    HTML DOM Viewer 是一款用于查看 HTML DOM 结构的工具。下面将详细讲解 HTML DOM Viewer 的使用方法： HTML DOM Viewer 的安装 首先，在浏览器中搜索“HTML DOM Viewer”，在搜索结果中选择一个安全、可靠的网站进行下载。 点击下载按钮，等待下载完成。下载完成后，解压下载的压缩文件。 在解压出来的文…

    JavaScript 2023年6月11日
    00

  • 利用JavaScript将Excel转换为JSON示例代码

    下面是利用JavaScript将Excel转换为JSON的完整攻略： 1. 准备工作 首先需要准备两个库：FileSaver.js 和 XLSX.js。FileSaver.js用于保存文件，而XLSX.js则用于解析excel文件。 npm install file-saver xlsx 在HTML中引入相关库： <script src="h…

    JavaScript 2023年5月27日
    00

  • js实现简洁的滑动门菜单(选项卡)效果代码

    下面我将详细讲解“js实现简洁的滑动门菜单(选项卡)效果代码”的完整攻略。 一、需求分析 我们需要实现一个简洁的滑动门菜单效果，点击菜单选项时，显示对应的内容区域，同时将当前选项高亮显示。具体实现步骤如下： 定义html结构，包含菜单选项和对应的内容区域。 使用CSS设置菜单选项和内容区域的布局样式，使其呈现滑动门效果。 使用JavaScript实现点击事件…

    JavaScript 2023年6月10日
    00

  • JavaScript原始数据类型Symbol的用法详解

    以下是详细讲解“JavaScript原始数据类型Symbol的用法详解”的完整攻略： JavaScript原始数据类型Symbol的用法详解 什么是Symbol Symbol是JavaScript新增的一种原始数据类型，用于表示独一无二的值。Symbol的值是唯一的，即使使用相同的参数创建多个Symbol值，它们也是不相等的。这也是Symbol的主要特点和用…

    JavaScript 2023年5月28日
    00

  • javaScript 判断字符串是否为数字的简单方法

    判断一个字符串是否为数字，可以使用多种方法，下面是两种常用的方法。 方法一：使用正则表达式 使用正则表达式可以判断一个字符串是否为数字，通过使用 test() 函数匹配字符串，检测该字符串是否符合数字格式。 if (/^[0-9]+$/.test(str)) { console.log(‘该字符串为数字’); } else { console.log(‘该字…

    JavaScript 2023年5月28日
    00

  • 总结javascript中的六种迭代器

    下面是对 JavaScript 中的六种迭代器的详细讲解。 什么是迭代器 在开始讲解迭代器之前，先来了解一下什么是迭代器。迭代器是一种设计模式，用于遍历任何类型的数据。简单来说，迭代器就是一个对象，该对象允许在一次运行中获取序列中的各个元素。 JavaScript 中的六种迭代器 JavaScript 提供了内置的六种迭代器，分别为： forEach() m…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部