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 相关文章推荐
基于JQuery的动态删除Table表格的行和列的代码
May 12 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 Javascript
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
Jul 04 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 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 魔术方法使用说明
2009/10/20 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
2013/11/21 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
JS闭包原理及其使用场景解析
2020/12/03 Javascript
基于python select.select模块通信的实例讲解
2017/09/21 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
Python排序函数的使用方法详解
2020/12/11 Python
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
市场营销专业毕业生自荐信
2013/11/02 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
法定代表人资格证明书
2014/09/11 职场文书
2015年公司新年寄语
2014/12/08 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
办公室岗位职责
2015/02/04 职场文书
甲午风云观后感
2015/06/02 职场文书
歌剧魅影观后感
2015/06/05 职场文书
父母教会我观后感
2015/06/17 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
Oracle配置dblink访问PostgreSQL的操作方法
2022/03/21 PostgreSQL
python中pycryto实现数据加密
2022/04/29 Python