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脚本
Dec 03 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
js 刷新页面的代码小结 推荐
Apr 02 Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
jQuery不使用插件及swf实现无刷新文件上传
Dec 08 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 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
提取HTML标签
2006/10/09 PHP
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
2009/11/04 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
Python基类函数的重载与调用实例分析
2015/01/12 Python
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
python3 反射的四种基本方法解析
2019/08/26 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
Python使用jupyter notebook查看ipynb文件过程解析
2020/06/02 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
品管员岗位职责
2013/11/10 职场文书
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
装修施工安全责任书
2014/07/24 职场文书
2014财务年终工作总结
2014/12/08 职场文书
幼儿园中班教师个人工作总结
2015/02/06 职场文书
创业计划书之冷饮店
2019/09/27 职场文书