欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

JavaScript 学习笔记（十三）Dom创建表格_基础知识

程序员文章站 2022-06-09 09:30:58
...
Dom基础—创建表格
利用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 objTable.deleteRow(i);
}
}

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

var index = objMyTable.rows.length;
var nextRow = objMyTable.insertRow(index); //在最后的行
//var nextRow = objMyTable.insertRow(0); //在最前的行

下面是示例代码
复制代码 代码如下:
第1行





JavaScript 学习笔记（十三）Dom创建表格_基础知识

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

相关文章

相关视频

网友评论

文明上网理性发言，请遵守 新闻评论服务协议

我要评论
  • JavaScript 学习笔记（十三）Dom创建表格_基础知识

    • 专题推荐

    作者信息
    JavaScript 学习笔记（十三）Dom创建表格_基础知识

    认证0级讲师

    发布技术文章
    • 最新文章
    • 热门排行
    推荐视频教程
  • JavaScript 学习笔记（十三）Dom创建表格_基础知识javascript初级视频教程
  • JavaScript 学习笔记（十三）Dom创建表格_基础知识jquery 基础视频教程
    • 视频教程分类

    ：公益在线php培训，帮助PHP学习者快速成长！

    Copyright 2014-2021 https://www.php.cn/ All Rights Reserved | 苏ICP备2020058653号-1JavaScript 学习笔记（十三）Dom创建表格_基础知识关于我们免责申明赞助与捐赠广告合作

    JavaScript 学习笔记（十三）Dom创建表格_基础知识   JavaScript 学习笔记（十三）Dom创建表格_基础知识
    相关标签： JavaScript 学习笔记

    上一篇： Laravel Log模块设计

    下一篇： 谈用Access数据库做服务器

    推荐阅读