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 相关文章推荐
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
angularJS 入门基础
Feb 09 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
Nov 16 Javascript
详解自动生成博客目录案例
Dec 09 Javascript
underscore之function_动力节点Java学院整理
Jul 11 Javascript
JS如何在数组指定位置插入元素
Mar 10 Javascript
解决vue中el-tab-pane切换的问题
Jul 19 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 number_format() 函数定义和用法
2012/06/01 PHP
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
destoon之一键登录设置
2014/06/21 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
Javascript 继承机制的实现
2009/08/12 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
React Native如何消除启动时白屏的方法
2017/08/08 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
python对execl 处理操作代码
2020/06/22 Python
python 字符串格式化的示例
2020/09/21 Python
浅析python 字典嵌套
2020/09/29 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
怎样在程序里获得一个空指针
2015/01/24 面试题
网络编程中设计并发服务器,使用多进程与多线程,请问有什么区别?
2016/03/27 面试题
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
单位活动策划方案
2014/08/17 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
付款证明模板
2015/06/19 职场文书
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android
Fluentd搭建日志收集服务
2022/09/23 Servers