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函数ajax
Aug 20 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
Dec 14 Javascript
javascript在子页面中函数无法调试问题解决方法
Jan 17 Javascript
html的DOM中Event对象onblur事件用法实例
Jan 21 Javascript
JS通过ajax动态读取xml文件内容的方法
Mar 24 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 Javascript
vue 自定义提示框(Toast)组件的实现代码
Aug 17 Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 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
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
由document.body和document.documentElement想到的
2009/04/13 Javascript
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
Python创建xml的方法
2015/03/10 Python
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
python实现百度语音识别api
2018/04/10 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
a标签下载链接的简单实现
2016/09/13 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
芬兰灯具网上商店:Nettilamppu.fi
2018/06/30 全球购物
就业表自我评价分享
2014/02/06 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
交通安全温馨提示语
2015/07/14 职场文书
MySQL系列之三 基础篇
2021/07/02 MySQL