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

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

• JavaScript
yizhihongxing

下面是详细的讲解：

简介

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日

相关文章

  • javascript工具库代码

    让我详细讲解一下JavaScript工具库代码的完整攻略。 什么是JavaScript工具库代码？ JavaScript工具库代码是已经封装好的JavaScript函数或类，它们帮助我们实现一些常见业务场景和功能，节省了开发者自行编写这些功能代码的时间和精力，提高了开发效率。 如何使用JavaScript工具库代码？ 使用JavaScript工具库代码可以通…

    JavaScript 2023年5月18日
    00

  • js实现星星闪特效

    首先介绍一下实现星星闪特效的基本思路，整个流程分为以下几步： 随机生成 N 个星星的位置和大小 再随机为每个星星设置一个动画延迟时间 使用 CSS3 动画为每个星星设置闪烁效果 可以通过 js 实现控制整个星空的暂停和继续 接下来，我将逐步详细讲解。 1. 随机生成 N 个星星的位置和大小 首先需要使用 js 随机生成一组星星的位置和大小，这可以使用循环来实…

    JavaScript 2023年6月10日
    00

  • JS动态给对象添加属性和值的实现方法

    下面是关于“JS动态给对象添加属性和值的实现方法”的完整攻略： 方式一：使用点运算符添加属性 使用点运算符添加属性非常简单，只需要在对象后加上”.”，紧接着加上新增的属性名，再赋予一个值即可。 示例一： let person = { name: ‘张三’, age: 25 }; person.gender = ‘男’; console.log(person)…

    JavaScript 2023年5月27日
    00

  • IE8 新增的Javascript 开发接口说明

    IE8新增的Javascript开发接口说明 Internet Explorer 8（简称IE8）是微软公司开发的一款网页浏览器，它在Javascript开发接口方面新增了很多功能，本文将对其进行详细讲解。 1. IE8新增的Javascript开发接口说明 1.1. 跨文档消息传递 IE8中新增了window.postMessage方法，可以在不同的窗口（…

    JavaScript 2023年6月10日
    00

  • JS+Canvas实现满屏爱心和文字动画的制作

    接下来我将详细讲解“JS+Canvas实现满屏爱心和文字动画的制作”的完整攻略。 准备工作 创建 HTML 页面，并引入 Canvas 标签。 “`html Canvas Demo “` 在 JavaScript 文件中获取 Canvas 对象并设置宽高。 javascript var canvas = document.getElementById(“…

    JavaScript 2023年6月11日
    00

  • JavaScript 异步调用框架 (Part 2 – 用例设计)

    JavaScript异步调用框架 (Part 2 – 用例设计) 什么是异步调用？ JavaScript是一种单线程的语言，所以同一时间只能执行一个任务。当一个任务阻塞了线程时，其他任务只能等待。由于JavaScript常用于web编程中，用户期望网页能够立即响应他们的操作。如果JavaScript因为执行某些长时间运行的函数而阻塞了线程，网页将会出现卡顿的…

    JavaScript 2023年5月28日
    00

  • 关于Javascript闭包与应用的详解

    关于JavaScript闭包与应用的详解 什么是闭包 简单来讲，闭包就是函数和函数所持有的变量的组合体。当一个函数内部定义了另一个函数，并将这个内部函数返回时，包含这个内部函数及其所引用的变量的部分一起称为闭包。 function outerFunction() { let outerVariable = ‘I am outer!’; function in…

    JavaScript 2023年6月10日
    00

  • 通过jQuery源码学习javascript(三)

    作为网站的作者，我很乐意为大家详细讲解“通过jQuery源码学习javascript(三)”的完整攻略。 攻略概述 这篇攻略主要是介绍如何通过学习jQuery源码来提高JavaScript编程水平，以及一些常用的技巧和方法。 具体来说，攻略的内容涵盖以下几个方面： 探究jQuery源码中的一些关键概念，例如：DOM操作、事件冒泡、事件委托等。 学习如何为jQ…

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