转行学开发,代码100天——2018-04-21

今天记录一下,JavaScript对表格table的操作应用,包括表格元素的获取,创建,删除等。

一个普通的完整表格包括以下几个部分:table->thead->tbody->tr->td等

1.表格的创建

如下面的一个表格,表头部分:序号-姓名-年龄

其下有三行三列的内容,属于tbody部分

其html结构如下:

<table id="tab" border="3" width="600px" height="40px" >
<thead>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
</thead> <tbody>
<tr>
<td>1</td>
<td>tom</td>
<td>23</td>
</tr>
<tr>
<td>2</td>
<td>john</td>
<td>33</td>
</tr>
<tr>
<td>3</td>
<td>july</td>
<td>21</td>
</tr> </tbody>
</table>

2.表格元素的获取

比如要想获取上述表格中的年龄为21的单元格内容,用什么方法呢?

最普通的实现思路就是逐步获取table->tbody->tr->td

如下:

getElementsByTagName
    window.onload = function(){

          var oTab = document.getElementById("tab");
alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[2].getElementsByTagName('td')[2].innerHTML);
};

而实际上表格本身包括行row和列column方法

alert(oTab.tBodies[0].rows[2].cells[2].innerHTML);

即获取tBody可以用tBodies

获取行用rows

获取单元格用cells

3.隔行变色

 //隔行变色
for (var i = 0; i < oTab.tBodies[0].rows.length; i++) {
if (i%2) {
oTab.tBodies[0].rows[i].style.background ="";
}else
{
oTab.tBodies[0].rows[i].style.background="#666";
}
}

4.鼠标移入移出表格换色

 //鼠标移入移出变色操作
oTab.tBodies[0].rows[i].onmouseover = function(){
this.style.background="#999";
};
oTab.tBodies[0].rows[i].onmouseout = function(){
this.style.background="";
}

此时如果鼠标滑过表格中某行时,该行颜色变色。

如此其基本功能完成了,但是结合上一步,如果同时要求各行换色,鼠标移动操作变色效果会如何呢?

 //隔行变色
for (var i = 0; i < oTab.tBodies[0].rows.length; i++) {
if (i%2) {
oTab.tBodies[0].rows[i].style.background ="";
}else
{
oTab.tBodies[0].rows[i].style.background="#666";
} //鼠标移入移出变色操作
oTab.tBodies[0].rows[i].onmouseover = function(){
this.style.background="#999";
};
oTab.tBodies[0].rows[i].onmouseout = function(){
this.style.background="";
}
}

鼠标移至第一行,其效果:

但是鼠标移开后, 其颜色均为白色,即代码中设置的空

如此便不是我们预期的效果了。。。

这一问题的处理,其实也很简单,即设置一个变量保存鼠标移动行的颜色,鼠标移开时还原即可。

   //隔行变色
for (var i = 0; i < oTab.tBodies[0].rows.length; i++) {
var oOldColor = null; //新建一个保存当前行颜色的变量 if (i%2) {
oTab.tBodies[0].rows[i].style.background ="";
}else
{
oTab.tBodies[0].rows[i].style.background="#666";
} //鼠标移入移出变色操作
oTab.tBodies[0].rows[i].onmouseover = function(){
oOldColor = this.style.background; //保存变色之前的颜色
this.style.background="#999";
};
oTab.tBodies[0].rows[i].onmouseout = function(){
this.style.background=oOldColor; //还原到之前的颜色
}
}

day36—javascript对表格table的操作应用(一)的更多相关文章

  1. day37—javascript对表格table的操作应用(二)

    转行学开发,代码100天——2018-04-22 昨天学习了JavaScript对table的基本操作,包括表格的创建,表格元素的获取,隔行换色及鼠标动作等.今天主要学习table的搜索查询及排序操作 ...

  2. jQuery动态对表格Table进行添加或删除行以及修改列值操作

    jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...

  3. JavaScript(第二十天)【DOM操作表格及样式】

    DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DOM操作表格和样式的一些知识. 一.操作表格 <table& ...

  4. 使用 iview Table 表格组件修改操作的显示隐藏

    使用 iview Table 表格组件修改操作的显示隐藏,如下图 1.如何设置 table 操作按后台传入的状态值去渲染 不同的按钮? 解决方法 我们在vue2中,动态渲染html 使用的是 retu ...

  5. 采用DOM进行表格的修改操作

    2015-08-31 <html> <head> <title>采用DOM进行表格的修改操作</title> <script language=& ...

  6. JavaScript 实现表格隔行变色

    JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...

  7. jQuery 选择表格(table)里的行和列及改变简单样式

    本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助jQuery对表格(table)的处理提供了相当强大的功能,比如说对 ...

  8. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

  9. JavaScript创建表格的两种方式

    方式一: var data = [ { id: 1, name: "first", age: 12 }, { id: 2, name: "second", ag ...

随机推荐

  1. oracle--表分区、分区索引

    --|/ range分区 create table sale( product_id varchar2(5), sale_count number(10,2) ) partition by range ...

  2. Java第四周编程总结

    第四周编程总结 1.写一个名为Rectangle的类表示矩形.其属性包括宽width.高height和颜色color,width和height都是double型的,而color则是String类型的. ...

  3. MyBatis基础面试题

    转自:http://www.cnblogs.com/huajiezh/p/6415322.html 1.Mybatis基础: #{...} 和 ${...} 的区别MyBatis将 #{…} 解释为J ...

  4. [Python3 填坑] 003 关键字?保留字?预留字?

    目录 1. print( 坑的信息 ) 2. 开始填坑 2.1 问题的由来 2.2 网上搜索 2.3 结论 2.4 后记 1. print( 坑的信息 ) 挖坑时间:2019/01/04 明细 坑的编 ...

  5. SSI框架【Struts、Spring、iBatis、Hibernate】

    1.B/S架构的JavaEE开发设计模式,JavaEE架构分成三个层次即表现层.业务逻辑层.数据持久层:而这三层分别通过Struts.Spring.iBatis开源的框架紧密组合在一起的. Strut ...

  6. eclipse中常用的快捷键【开发常用到的】

    1.全部选中:Ctrl+A 2.剪切Ctrl+X.复制Ctrl+C.粘贴Ctrl+V.保存Ctrl+S 3.撤销Ctrl+Z.取消撤销Ctrl+Y 4.规范代码:Ctrl+Shift+F 5.将代码更 ...

  7. HardFault_Handler

    STM32程序一运行就进入HardFault_Handler,原因很可能是堆栈溢出 ]={}; // 我把程序中上面这句注释了就没事了 :进入HardFault_Handler也可能是数组越界引起的: ...

  8. HDFS镜像文件fsimage和编辑日志文件edits

    镜像文件和编辑日志文件 1)概念 namenode被格式化之后,将在/opt/module/hadoop-2.7.2/data/tmp/dfs/name/current目录中产生如下文件 edits_ ...

  9. SQL取年月日的不同格式

    Select CONVERT(varchar(100), GETDATE(), 0): 05 16 2006 10:57AM Select CONVERT(varchar(100), GETDATE( ...

  10. npm模块管理器

    npm模块管理器 地址: http://javascript.ruanyifeng.com/nodejs/npm.html#