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日

相关文章

  • Vue3 Element Plus el-form表单组件示例详解

    下面是“Vue3 Element Plus el-form表单组件示例详解”的完整攻略： 1. 简介 Vue3 Element Plus是一套基于Vue 3和Element Plus组件库的前端解决方案。它提供了丰富的UI组件和工具，用于开发高质量的Web应用程序。 其中，el-form表单组件是Element Plus中的一个常用组件之一，用于收集和验证用…

    JavaScript 2023年6月10日
    00

  • JavaScript获取上传文件相关信息示例详解

    让我详细讲解一下“JavaScript获取上传文件相关信息示例详解”。 1. 背景介绍 在前端开发中，有时需要上传文件，比如上传图片、上传文档等。上传文件时，我们需要获取文件的相关信息，比如文件名称、文件大小、文件类型等信息。 在本文中，我们将通过两条 JavaScript 示例详细讲解如何获取上传文件的相关信息。 2. 示例1：使用FileReader对象…

    JavaScript 2023年5月27日
    00

  • 利用AjaxSubmit()方法实现Form提交表单后回调功能

    要实现Form提交表单后回调功能，我们可以使用jQuery中的AjaxSubmit()方法。这个方法可以使用ajax方式提交表单，而且可以在提交表单后回调函数中处理返回的数据。 下面是实现的详细步骤： 1.引用jQuery库和jQuery.form插件。 <script src="https://cdnjs.cloudflare.com/aj…

    JavaScript 2023年6月10日
    00

  • jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题

    在IE6、7、8中，无法使用原生的JSON.stringify函数，因此如果需要将JavaScript对象转化为JSON字符串，我们需要使用jQuery中的$.parseJSON和$.stringify方法。 下面是解决方案的完整攻略： 引入jQuery库 在或中引入jQuery库： <!DOCTYPE html> <html> &l…

    JavaScript 2023年5月27日
    00

  • 父元素与子iframe相互获取变量和元素对象的具体实现

    实现父元素与子iframe相互获取变量和元素对象，可以通过两种方法来实现： 父元素获取子iframe中的变量和元素对象 通过JavaScript中的window对象可以获取和控制iframe中的变量和元素对象。首先要获取到子iframe的window对象，即子页面的全局window对象，然后通过该对象获取到iframe中需要的变量和元素对象。 示例1：获取子…

    JavaScript 2023年6月10日
    00

  • Javascript中的async函数详解

    Javascript中的async函数详解 Introduction 在Javascript中，async函数是一个让我们可以使用异步的方法来执行本来以同步方式执行的代码的函数。 它使我们能够避免回调地狱并轻松处理异步代码的结果。在本文中，我们将详细讲解async函数，并说明如何使用它们。 Async函数和Promise ES6中带来了很多新的概念和特性，如…

    JavaScript 2023年5月27日
    00

  • JavaScript常规加密技术实现方式详解

    JavaScript常规加密技术实现方式详解 什么是加密技术？ 在计算机科学中，加密技术是指将信息从一种形式转换为另一种形式，使得只有授权的人可以读取或理解信息。加密技术在计算机安全、金融、通信等领域得到广泛应用，目的是保护信息的机密性、完整性和可用性。 常见的加密技术 对称加密 对称加密是最基本的加密技术之一，它使用同一个密钥进行加密和解密。对称加密的优点…

    JavaScript 2023年5月19日
    00

  • AJAX 支持搜索引擎问题分析

    AJAX 支持搜索引擎问题分析 搜索引擎可以的爬行器（spider）抓取网站的数据，并将其存储在搜索引擎的数据库中。搜索引擎将这些数据从数据库中检索出来以满足用户的查询需求。然而，一些网站是使用了 AJAX 技术来实现异步请求的，这可能会导致搜索引擎无法获取到这些网站的数据，而无法对其进行索引。 要解决这个问题，我们需要做一些改变，以便搜索引擎可以正确地获得…

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