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 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
Jquery中dialog属性小记
Sep 03 Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 Javascript
jQuery 实现双击编辑表格功能
Jun 19 jQuery
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
ES6 Promise对象的含义和基本用法分析
Jun 14 Javascript
vue中keep-alive,include的缓存问题
Nov 26 Javascript
浅谈react useEffect闭包的坑
Jun 08 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中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
PHP截取指定图片大小的方法
2014/12/10 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
走出JavaScript初学困境—js初学
2008/12/29 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
javascript中对变量类型的判断方法
2015/08/09 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
JS改变页面颜色源码分享
2018/02/24 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
Python中实现结构相似的函数调用方法
2015/03/10 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
详解python调度框架APScheduler使用
2017/03/28 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
苹果香港官方商城:Apple香港
2016/09/14 全球购物
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
历史学专业毕业生求职信
2013/09/27 职场文书
医药销售自我评价200字
2014/09/11 职场文书
高考1977观后感
2015/06/04 职场文书
导游词之太湖
2019/10/08 职场文书
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python
Django+Celery实现定时任务的示例
2021/06/23 Python