标签：order 转行 else var 获取 img 实现 内容 今天
转行学开发，代码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; //还原到之前的颜色 } }
标签：order 转行 else var 获取 img 实现 内容 今天
原文地址：https://www.cnblogs.com/allencxw/p/8900779.html
