JS document.createElement 动态添加表

最新推荐文章于 2022-11-08 11:40:18 发布
最新推荐文章于 2022-11-08 11:40:18 发布
阅读量1.7k 收藏 2
点赞数
文章标签： table border function div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tsapi/article/details/4922943
版权

 

JS动态生成DIV比较简单，下面是表的示例

 

<html>

<head>

<title>简单示例</title>

<script>

    function start() {

        // 获取body

        var body = document.getElementsByTagName("body")[0];

 

        // 创建表节点 和tbody节点

        var tbl     = document.createElement("table");

        var tblBody = document.createElement("tbody");

 

 

        for (var j = 0; j < 4; j++) {

            // 添加行tr

            var row = document.createElement("tr");

 

            for (var i = 0; i < 2; i++) {

                // 添加列td

                var cell = document.createElement("td");

                cell.style.border=0;

                cell.style.cellspacing="0";

                cell.style.cellpadding="0";

                var cellText = document.createTextNode("cell is row "+j+", column "+i);

                cell.appendChild(cellText);

                row.appendChild(cell);

            }

 

            // 增加到tbody

            tblBody.appendChild(row);

        }

 

        // 把tbody放入table中

        tbl.appendChild(tblBody);

        // table put to body

        body.appendChild(tbl);

 

set atrribute

        tbl.setAttribute("border", "0");

    }

</script>

</head>

<body οnlοad="start()">

</body>

</html>

 

符合DHTMl的层次结构

 

 

Daqing
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js算法--输入行列，生成一个表格（table）
xingguanghui_1134的专栏
08-27 1万+
html: 请输入行数: 请输入列数: 创建 javaScript: functino autocreate() { var line = document.getElementById('rows').value; var list = document.getElementById('cols').value; var
dom创建table的一个方法
毁&灭
08-20 1464
  　　document.createElement("table")只是创建了一个对象，如果要把它添加到document中，还需要另外的方法（appendChild、insertAdjacentElement、insertBefore）         例子：                                                        
(转)使用JavaScript和DOM动态创建表格
weixin_30823227的博客
11-28 370
第一次翻译技术文章，本身英语水平很烂，翻译的也是自己刚开始学习的技术，所以能勉强看懂英文的话都要尽量读 原文 而不要看我的翻译，免得被误导。阅读原文简介　　这篇文章简单介绍了DOM 1.0一些基本而强大的方法以及如何在JavaScript中使用它们。你可以学到如何动态地创建、获取、控制和删除HTML元素。这些DOM方法同样适用于XML。所有全面支持DOM 1.0的浏览器都能很好地运行本篇的实例，比...
document.createElement("table")
weixin_44895008的博客
08-02 1465
createElement <style> .div{ border: 1px solid black; height: 300px; width: 300px; margin: auto; } </style>
JavaScript动态创建table表格
热门推荐
yangxin_blog的专栏
10-13 3万+
自动创建表格，主要是利用table对象的insertRow(),和insertCell()等技术
使用 JavaScript 创建表
allway2的博客
03-31 9050
JavaScript 编程语言允许我们创建和操作DOM（文档对象模型）元素。它为我们提供了更大的灵活性，并使每个人都可以更轻松地使用 DOM，尤其是如果您是后端开发人员。 有两种方法可以将 HTML 元素（如表格）添加到 HTML 文档中，第一种是将 HTML 表格标记直接添加到我们的 HTML 网页中，第二种方法是在我们的 JavaScript 代码中创建整个表格。第二个选项是最流行的创建表并将其添加到 DOM 的方法。 但在深入了解如何使用 JavaScript 创建表格之前，让我们首先直观地了解用
document.createElement()用法
09-05
`document.createElement()` 是JavaScript中的一个核心方法，用于在DOM（Document Object Model）中动态创建新的元素节点。这个方法允许开发者在网页加载后根据需要添加新的HTML元素，为页面增加交互性和动态性。它...
IE9+已经不对document.createElement向下兼容的解决方法
09-03
在JavaScript中，`document.createElement` 是一个用于动态创建HTML元素的方法。然而，不同的浏览器对它的实现可能存在差异。在IE9及更高版本中，为了更好地遵循W3C标准，微软对某些方法进行了调整，使得`document....
document.createElement()用法及注意事项(ff下不兼容)
10-27
`document.createElement()` 是JavaScript中的一个核心方法，用于动态创建HTML元素。这个方法在处理动态网页和交互式应用时非常有用，因为它允许我们在页面加载后或用户操作时动态地添加、修改或删除DOM元素。然而，...
动态添加option及createElement使用示例
09-04
在给出的示例中，动态添加`<option>`是通过`createElement`方法来完成的。下面我们将详细讨论这个知识点。 `createElement`是JavaScript中的一个内置函数，属于`document`对象的方法，用于创建一个新的HTML元素。在...
js动态生成form 并用ajax方式提交的实现方法
11-24
在JavaScript中，动态生成表单（form）以及使用Ajax方式提交数据是一种常见的需求，尤其是在页面交互和异步数据处理中。下面将详细解释这个过程，包括如何创建动态表单、添加表单元素以及如何利用Ajax进行提交。 ...
js动态创建表格
mcyhero的博客
06-03 1663
var tab = document.createElement("table"); tab.border = "1px"; document.body.appendChild(tab); for(var i =0;i<3;i++){ var tr = document.createElement("tr"); for(var j=0;j<3;j++){ v...
JavaScript_动态创建表格（及其所有的知识点）_Unit_9;
qq_38053395的博客
08-14 462
Topic ：动态创建表格（及其所有的知识点） 功能说明：  我们模拟从服务器得到数据来动态生成表格的过程  我们把表格放到指定的位置  在这里我们放到box里面 我们可以通过删除键来进行删除相应的数据 我们把生成表格的方法封装成一个函数这样我们以后就可以用一句话方便的创建表格了； 网页示例：   代码示例 ： &lt;!doctype html&gt; &lt;html&...
DOM操作技术-操作表格
cake_eat的博客
09-23 232
为了方便构建表格，HTML DOM还为<table>、<tbody> 和<tr>元素添加了一些属性和方法。 例如： //创建 table var table = document.createElement("table"); table.border = 1; table.width = "100%"; //创建 tbody var tbody = document.createElement("tbody"); table.appendChild(tbody);
js dom之动态创建表格 最详细
aa147258aa147的博客
11-08 543
js dom之动态创建表格
在 JavaScript 中动态创建表格、按钮和 DIV
allway2的博客
02-17 2314
使用 document.createElement() 方法，您可以在 JavaScript 中动态创建指定的 HTML 元素。创建后，您可以将元素插入（或添加）到您的网页，或将其添加到预定义元素或动态创建的元素中。实际上，您可以使用此方法动态创建整个表单。在本文中，我将向您展示如何使用“createElement()”方法动态创建 HTML 表格，并使用从数组中提取的数据填充表格。 表单通常不仅包含表格，还包含其他元素。例如，我们需要一个按钮来从表中提取数据并提交。因此，除了 <table>
document.createElement()的用法
逍遥乐网-www.hejingzong.cn
03-20 526
document.createElement()的用法 document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。 下面，举...
javascript document.createElement
最新发布
09-01
下面是一个简单的示例，演示了如何使用 `document.createElement` 创建一个新的 `div` 元素，并将其添加到页面中： ```javascript const newDiv = document.createElement('div'); newDiv.textContent = 'Hello, ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值