在 JavaScript 中动态创建表格、按钮和 DIV

使用 document.createElement() 方法，您可以在 JavaScript 中动态创建指定的 HTML 元素。创建后，您可以将元素插入（或添加）到您的网页，或将其添加到预定义元素或动态创建的元素中。实际上，您可以使用此方法动态创建整个表单。在本文中，我将向您展示如何使用“createElement()”方法动态创建 HTML 表格，并使用从数组中提取的数据填充表格。

表单通常不仅包含表格，还包含其他元素。例如，我们需要一个按钮来从表中提取数据并提交。因此，除了 <table> 之外，我还将向您展示如何使用createElement()方法创建 Input 类型的按钮元素以及DIV元素（将用作容器）。

也就是说，使用我们将实际创建三个元素的方法，在这个例子中是动态的。

最后，我将向您展示如何遍历动态创建的表以从每个单元格中提取所有值并提交值。

你为什么要这样做，取决于你的选择。您可以决定在设计时添加页面上的所有元素，或者您可以在运行时创建和插入 HTML 元素，即动态使用createElement()方法。

另请阅读： 如何使用 JavaScript 从 HTML 表中读取数据

所以，让我们从我们的例子开始。

带有脚本的标记

我没有在设计时添加任何控件。因此，标记部分没有太多内容。我将在运行时在 JavaScript 中创建和添加的所有元素。

正文 onload 事件调用一个名为CreateTable()的 JavaScript 函数。

<!DOCTYPE html>
<html><head><title>JavaScript document.createElement Method Example</title><style>table, th, td{font: 17px Calibri;border: solid 1px #DDD;border-collapse: collapse;padding: 2px 3px;text-align: center;margin: 10px 0;}th {font-weight:bold;}</style></head><body onload="CreateTable();"></body><script>function CreateTable() {// CREATE DYNAMIC TABLE.var table = document.createElement('table');// SET THE TABLE ID. // WE WOULD NEED THE ID TO TRAVERSE AND EXTRACT DATA FROM THE TABLE.table.setAttribute('id', 'empTable');var arrHead = new Array();arrHead = ['Emp. ID', 'Emp.Name', 'Designation'];var arrValue = new Array();arrValue.push(['1', 'Green Field', 'Accountant']);arrValue.push(['2', 'Arun Banik', 'Project Manager']);arrValue.push(['3', 'Dewane Paul', 'Programmer']);var tr = table.insertRow(-1);for (var h = 0; h < arrHead.length; h++) {var th = document.createElement('th');              // TABLE HEADER.th.innerHTML = arrHead[h];tr.appendChild(th);}for (var c = 0; c <= arrValue.length - 1; c++) {tr = table.insertRow(-1);for (var j = 0; j < arrHead.length; j++) {var td = document.createElement('td');          // TABLE DEFINITION.td = tr.insertCell(-1);td.innerHTML = arrValue[c][j];                  // ADD VALUES TO EACH CELL.}}// NOW CREATE AN INPUT BOX TYPE BUTTON USING createElement() METHOD.var button = document.createElement('input');// SET INPUT ATTRIBUTE 'type' AND 'value'.button.setAttribute('type', 'button');button.setAttribute('value', 'Read Table Data');// ADD THE BUTTON's 'onclick' EVENT.button.setAttribute('onclick', 'GetTableValues()');// FINALLY ADD THE NEWLY CREATED TABLE AND BUTTON TO THE BODY.document.body.appendChild(table);document.body.appendChild(button);}function GetTableValues() {var empTable = document.getElementById('empTable');// CREATE A DIV WHERE WE'LL SHOW THE TABLE WITH DATA.var div = document.createElement('div');div.innerHTML = "";div.innerHTML = '<br />';// TRAVERSE THROUGH THE TABLE TO XTRACT CELL VALUES.for (var r = 1; r <= empTable.rows.length - 1; r++) {        // EACH ROW IN THE TABLE.// EACH CELL IN A ROW.for (c = 0; c <= empTable.rows[r].cells.length - 1; c++) {// ADD DATA TO THE DIV.div.innerHTML = div.innerHTML + ' ' +empTable.rows[r].cells[c].innerHTML;}div.innerHTML = div.innerHTML + '<br />';}document.body.appendChild(div);     // APPEND (ADD) THE CONTAINER TO THE BODY.}</script>
</html>

我已经使用document.createElement()方法动态地创建了这个示例表单中的每个元素。所以，我知道这个方法有多么强大和有用，你可以根据你的要求创建任意数量的元素。而且它很快。

相关： 使用 jQuery 动态地将行添加到表中

您也可以尝试该方法并创建其他元素。例如，您可以创建和添加 HTML <button> 标签，而不是输入类型按钮 (<input>)。这就是你的做法。

var button = document.createElement('button');          // CREATE THE BUTTON.
var bText = document.createTextNode('Submit');          // CREATE TEXT FOR THE BUTTON
button.appendChild(bText);                              // ADD THE TEXT TO THE BUTTON.

创建 <button> 标记后，将onclick事件属性添加到按钮。

button.setAttribute('onclick', 'GetTableValues()');

其他一切都将保持不变。

而已。谢谢阅读。☺

在 JavaScript 中动态创建表格、按钮和 DIV相关推荐

在iView中动态创建表格
最近在使用iView中的表格组件时,碰到许多坑和疑惑,仔细研究了一下table组件,发现官方文档讲的不是很清楚,本文将介绍并使用table组件,做一个动态创建表格的demo,效果如下图. 一.在col ...
JavaScript中动态生成表格
1. 以下这个案例比较典型: 涉及到dom节点的操作,以及数组和对象的遍历方法题目要求: 使用数组把学生数据模拟出来. 动态创建行.单元格. 为单元格填充数据. 提供"删除"链 ...
FineUIMvc随笔（1）动态创建表格列
声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. <FineUIMvc随笔>目录 FineUIMvc随笔(1)动态创建表格列 FineUIMvc随笔(2)怎样在控件中 ...
javascript动态创建表格：新增、删除行和列
利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧. 1. ...
javascript 动态创建表格：新增、删除行和单元格
2019独角兽企业重金招聘Python工程师标准>>> 利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多 ...
利用javascript动态创建表格
//说明:实现功能.原理上文相同.不过这次是利用已有的简单的方法创建行和列,并实现内容行鼠标移入变色功能! 效果图: /*两个方法 1. trNode table.insertRow(-1) ...
Qt中多个动态创建的按钮同时绑定一个槽函数，判断被点击的是哪个按钮
当动态创建按钮,每一个创建的按钮都与同一个槽函数绑定,点击按钮的时候获取被点击的按钮的文本. 代码如下: QString getClickedBtn() {outPut<<"ge ...
JavaScript学习（二十二）—动态创建表格
JavaScript学习(二十二)-动态创建表格效果如下: 代码如下: <!DOCTYPE html> <html lang="en"><head& ...
WPF 中动态创建和删除控件
WPF 中动态创建和删除控件原文:WPF 中动态创建和删除控件动态创建控件 1.容器控件.RegisterName("Name",要注册的控件) //注册控件 2.容器控件 ...

在 JavaScript 中动态创建表格、按钮和 DIV

在 JavaScript 中动态创建表格、按钮和 DIV相关推荐

最新文章

热门文章