`
yanyanquan
  • 浏览: 450579 次
  • 性别: Icon_minigender_1
  • 来自: 江门
社区版块
存档分类
最新评论

js来动态创建表格

 
阅读更多

利用js来动态创建表格有两种格式,appendChild()和insertRow、insertCell()。但第一种有可能在IE上有问题,所以推荐使用第二种。
1、insertRow(index):index从0开始
这个函数将新行添加到index的那一行前,比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于 insertRow(-1),将新行添加到表的最后。一般我们在使用的时候都是:
objTable.insertRow (objTable.rows.length)就是为表格objTable在最后新增一行。
insertCell()和insertRow的用法相同。
2、deleteRow(index):index从0开始
删除指定位置的行,要传入的参数:Index是行在表格中的位置,可以下面的方法取得然后去删除:
var row = document.getElementById("行的Id");
var index = row.rowIndex; //有这个属性
objTable.deleteRow(index);
在使用过程中,删除表格的行的时候,如果删除了某一行,那么表格行数是马上就变化的,rows.length总是在变小,所以如果你要删除表格的所有行:
代码如下:
function removeAllRow() {
var objTable = document.getElementById("myTable");
var length = objTable.rows.length;
for (var i = 1; i < length; i++) {
objTable.deleteRow(i);
}
}

3、setAttribute()方法,动态设置单元格与行的属性
格式如下:setAttribute(属性,属性值)
var objMyTable = document.getElementById("myTable");
objMyTable.setAttribute("border", 1); //为表格设置边框为1
在使用的时候遇到一个设置样式的问题,不能用
setAttribute("class","inputbox1");而应该使用
setAttribute("className","inputbox1"),
4、创建表格
了解了行<tr>与单元格<td>的增删那就可以创建表格了。
第一步:你需要有一个你去动态变化的表格,这里讲的是已经存在页面的表格,我们设置一个id:myTable
  var objMyTable = document.getElementById("myTable");
第二步:创建行与列的对象
代码如下:
var index = objMyTable.rows.length;
var nextRow = objMyTable.insertRow(index); //在最后的行
//var nextRow = objMyTable.insertRow(0); //在最前的行

 

分享到:
评论

相关推荐

    javascript动态创建表格

    JavaScript 动态创建表格是指使用 JavaScript 语言来动态地创建和修改 HTML 表格的行和单元格。这种技术非常有用,特别是在需要频繁地更新表格数据的情况下。 动态创建表格的两种方式 1. 使用 `appendChild()` ...

    js动态创建表格

    js动态创建表格,利用dom技术动态输入行列来创建表格

    javascript下动态创建表格的三种方式

    ### JavaScript 下动态创建表格的三种方式 在网页开发过程中,经常需要通过JavaScript来动态地创建或更新HTML元素,其中就包括表格(`&lt;table&gt;`)。本文将详细介绍在JavaScript中动态创建表格的三种常见方法,并对每...

    JS DOM动态创建表格 行 列

    JS DOM动态创建表格 行 列

    qml动态创建表格

    自已写的一个动态创建表格的qml程序,通过js来控制逻辑,还是很有用

    使用JavaScript和DOM动态创建表格

    使用JavaScript和DOM动态创建表格

    jQuery动态创建表格生成器代码.zip

    总的来说,"jQuery动态创建表格生成器代码"是一个高效、易用的工具,它降低了开发动态表格的复杂度,使得前端开发者能够更专注于数据处理和用户体验的设计。通过深入理解并运用这个工具,你可以创建出更加灵活、互动...

    动态创建表格

    javaScript动态创建表格

    js读取json数据动态生成列数不固定的表格

    我们可以利用`document.createElement()`、`.appendChild()`等方法动态创建这些元素。 4. **数据驱动视图**:根据JSON数据的结构,我们需要遍历数据,为每一项生成对应的表格行。如果列数不固定,我们需要在开始...

    javascript_动态创建表格

    总结来说,使用JavaScript动态创建和管理表格是一种非常实用且强大的功能,可以帮助开发者根据用户的需求实时调整表格结构。通过上述方法的介绍,你可以更灵活地控制表格的显示效果,提高用户体验。

    老裴帮助关于Javascript动态创建表格的小练习

    标题中的“老裴帮助关于Javascript动态创建表格的小练习”指的是一个使用JavaScript编程语言来动态创建HTML表格的学习资源或教程。JavaScript是一种广泛应用于客户端Web开发的脚本语言,它允许开发者在用户与网页...

    Javascript动态创建表格

    Javascript动态创建表格 兼容google浏览器、360,ie等浏览器,很实用

    动态创建删除表格

    要动态创建表格,我们可以使用jQuery的`append()`方法在页面上指定的元素后添加新的HTML代码。 1. **创建整个表格**: 假设我们有一个空的`div`元素用于放置表格,其ID为`tableContainer`。可以这样创建一个2行3列...

    动态创建表格标签

    在IT领域,动态创建表格标签是一项常见的编程任务,特别是在网页开发和用户界面设计中。这一技术使得开发者能够根据需要在运行时自动生成表格元素,如`&lt;table&gt;`、`&lt;tr&gt;`(表格行)、`&lt;td&gt;`(表格数据单元格)以及与...

    javascript动态创建表格.doc

    总结来说,JavaScript动态创建和操作表格的核心在于理解`insertRow()`、`insertCell()`、`deleteRow()`和`deleteCell()`方法的使用,以及如何灵活地设置表格和单元格的属性。在实际应用中,要注意浏览器兼容性问题,...

    js生成动态表格并为每个单元格添加单击事件的方法

    本文所探讨的方法主要涉及使用JavaScript动态创建表格,并为表格中的每一个单元格添加点击事件处理函数,实现点击单元格时能够弹出单元格内容并改变单元格背景颜色的效果。下面详细地对标题、描述和给出的部分内容...

    js动态操作表格

    以上就是JavaScript动态操作表格的基本方法。实际应用中,可能还需要考虑到事件监听、异步数据加载等情况。通过熟练掌握这些技巧,你可以创建出交互性强、功能丰富的表格应用。记住,实践是检验理论的最好方式,尝试...

    jquery 动态创建表格单元随机色

    在这个场景中,我们关注的是如何使用 jQuery 动态创建表格,并且为表格的每个单元格赋予随机背景颜色。这通常用于增强用户界面的视觉吸引力,或者在数据展示时提供更直观的区分。 首先,我们需要理解 jQuery 如何...

    javascript如何创建表格(javascript绘制表格的二种方法)

    利用js来动态创建表格有两种格式,appendChild()和insertRow、insertCell()。两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种方法,看下面的解决和使用方法

    JavaScript动态添加删除表格行

    在HTML中,`&lt;table&gt;`元素用于创建表格,而动态操作表格行通常涉及到DOM(Document Object Model)的操作。JavaScript提供了对DOM的访问和修改能力,让我们能够动态地添加、删除或修改表格元素。 1. **添加表格行**...

Global site tag (gtag.js) - Google Analytics