DOM基础教程之使用DOM控制表格


Posted in Javascript onJanuary 20, 2015

表格的css控制就先不说了,首先分享下表格常用的DOM

DOM基础教程之使用DOM控制表格

表格添加操作的方法常用的为insertRow()和insertCell()方法。

row是从零开始计算起的,例如:

var oTr = document.getElementById("member").insertRow(2)

是指将新行添加到第二行。

var aText = new Array();

aText[0] = document.createTextNode("fresheggs");

aText[1] = document.createTextNode("W610");

aText[2] = document.createTextNode("Nov 5th");

aText[3] = document.createTextNode("Scorpio");

aText[4] = document.createTextNode("1038818");

for(var i=0;i<aText.length;i++){

var oTd = oTr.insertCell(i);

oTd.appendChild(aText[i]);

}

变量oTr即为表格插入新行,再利用insertCell为这行插入新的数据,利用createTextNode创建新的文本节点,在appendChild给oTd,oTd即为新的单元格。

1.插入一行(动态添加表格)

<script type="text/javascript">

window.onload=function(){

    var oTr = document.getElementById("member").insertRow(2);    //插入一行

    var aText = new Array();

    aText[0] = document.createTextNode("fresheggs");

    aText[1] = document.createTextNode("W610");

    aText[2] = document.createTextNode("Nov 5th");

    aText[3] = document.createTextNode("Scorpio");

    aText[4] = document.createTextNode("1038818");

    for(var i=0;i<aText.length;i++){

        var oTd = oTr.insertCell(i);

        oTd.appendChild(aText[i]);

    }

}

</script>

<table class="datalist" summary="list of members in EE Studay" id="member">

    <caption>Member List</caption>

    <tr>

        <th scope="col">Name</th>

        <th scope="col">Class</th>

        <th scope="col">Birthday</th>

        <th scope="col">Constellation</th>

        <th scope="col">Mobile</th>

    </tr>

    <tr>

        <td>isaac</td>

        <td>W13</td>

        <td>Jun 24th</td>

        <td>Cancer</td>

        <td>1118159</td>

    </tr>

    <tr>

        <td>girlwing</td>

        <td>W210</td>

        <td>Sep 16th</td>

        <td>Virgo</td>

        <td>1307994</td>

    </tr>

    <tr>

        <td>tastestory</td>

        <td>W15</td>

        <td>Nov 29th</td>

        <td>Sagittarius</td>

        <td>1095245</td>

    </tr>

</table>

2.修改表格的内容

当表格建立后,可以直接使用HtmlDom对表格进行操作,相比document.getElementById(),document.getElementsByTagName()操作更为方便。
oTable.rows[i].cell[j]
以上通过rows、cells两个属性轻松访问到表格特定的内容第i行和第j列(都是从0开始计数),获得单元格对象后就可以使用innerHTML属性修改翔宇的内容了。
例如修改4行5列的内容为good
则可以使用以下代码

var oTable = document.getElementById("table1");

oTable.rows[4].cells[5].innerHTML = "good";

3.删除表格内容

表格既然有添加、修改、就有删除功能。
表格中删除行使用deleteRow(i)方法,其中i为行号。
表格中删除列使用tr的deleteCell(j)方法。

如下代码表示删除表格的第二行及原来表格第三行的第二列

var oTable = document.getElementById("table1"); oTable.deleteRow[2]; oTable.rows[2].deleteCell[3];

如下代码表示删除表格的第二行及原来表格第三行的第二列 考虑到动态删除又不影响整体html框架,又或者表格内容很多的情况下,可以采用动态删除添加的办法

<script type="text/javascript">

window.onload=function(){

    var oTr = document.getElementById("member").insertRow(2);    //插入一行

    var aText = new Array();

    aText[0] = document.createTextNode("fresheggs");

    aText[1] = document.createTextNode("W610");

    aText[2] = document.createTextNode("Nov 5th");

    aText[3] = document.createTextNode("Scorpio");

    aText[4] = document.createTextNode("1038818");

    for(var i=0;i<aText.length;i++){

        var oTd = oTr.insertCell(i);

        oTd.appendChild(aText[i]);

    }

}

</script>

<table class="datalist" summary="list of members in EE Studay" id="member">

    <caption>Member List</caption>

    <tr>

        <th scope="col">Name</th>

        <th scope="col">Class</th>

        <th scope="col">Birthday</th>

        <th scope="col">Constellation</th>

        <th scope="col">Mobile</th>

    </tr>

    <tr>

        <td>isaac</td>

        <td>W13</td>

        <td>Jun 24th</td>

        <td>Cancer</td>

        <td>1118159</td>

    </tr>

    <tr>

        <td>girlwing</td>

        <td>W210</td>

        <td>Sep 16th</td>

        <td>Virgo</td>

        <td>1307994</td>

    </tr>

    <tr>

        <td>tastestory</td>

        <td>W15</td>

        <td>Nov 29th</td>

        <td>Sagittarius</td>

        <td>1095245</td>

    </tr>

</table>

删除列

function deleteColumn(oTable, iNum) {

                //自定义删除列函数,即每行删除相应单元格

                for (var i = 0; i < oTable.rows.length; i++)

                    oTable.rows[i].deleteCell(iNum);

            }

            window.onload = function() {

                var oTable = document.getElementById("table1");

                deleteColumn(oTable, 2);

            }

对于删除表格列而言,DOM中没有直接可调用的方法,需要自己来写deleteColumn()方法,该方法接受两个参数,一个参数是表格对象,另外一个参数则是希望删除的列号。编写方法很简单,利用deleteCell()方法,每一行都执行相应的删除单元格的方法。

Javascript 相关文章推荐
禁止js文件缓存的代码
Apr 09 Javascript
JavaScript 语言基础知识点总结(思维导图)
Nov 10 Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
May 11 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 Javascript
vue与django集成打包的实现方法
Nov 11 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 Javascript
JS实现按比例缩小图片宽高
Aug 24 Javascript
jQuery实现tag便签去重效果的方法
Jan 20 #Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 #Javascript
DOM基础教程之事件类型
Jan 20 #Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 #Javascript
DOM基础教程之事件对象
Jan 20 #Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 #Javascript
js实现的捐赠管理完整实例
Jan 20 #Javascript
You might like
PHP获取网站域名和地址的代码
2008/08/17 PHP
用PHP读取flv文件的播放时间长度
2009/09/03 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
jQuery1.6 使用方法二
2011/11/23 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
2015/09/06 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
centos下更新Python版本的步骤
2013/02/12 Python
python框架django基础指南
2016/09/08 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
python实现快递价格查询系统
2020/03/03 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
用Python 执行cmd命令
2020/12/18 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
机械专业毕业生推荐信范文
2013/11/25 职场文书
警示教育活动总结
2014/05/05 职场文书
普通党员对照检查材料
2014/08/28 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
退学证明范本3篇
2014/10/29 职场文书
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL
Python代码实现双链表
2022/05/25 Python