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 相关文章推荐
关于JavaScript定义类和对象的几种方式
Nov 09 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
laypage分页控件使用实例详解
May 19 Javascript
JS版微信6.0分享接口用法分析
Oct 13 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
Dec 28 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
Vue隐藏显示、只读实例代码
Jul 18 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字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
javascript 闭包详解
2015/02/15 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
2016/06/15 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
nodejs express配置自签名https服务器的方法
2018/05/22 NodeJs
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
Python中拆分字符串的操作方法
2019/07/23 Python
PyQt使用QPropertyAnimation开发简单动画
2020/04/02 Python
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
医校毕业生自我鉴定
2014/01/25 职场文书
园艺师求职信
2014/03/10 职场文书
农村改厕实施方案
2014/03/22 职场文书
校车安全责任书
2014/08/25 职场文书
验房委托书
2014/08/30 职场文书
群众路线对照检查材料
2014/09/22 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python