zoukankan      html  css  js  c++  java
  • day36—javascript对表格table的操作应用(一)

    转行学开发,代码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;   //还原到之前的颜色
                   }
              }
  • 相关阅读:
    微信小程序 组件事件传递
    vue 项目引入字体报错
    vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法
    react 动态获取数据
    百度地图marker点击任意一个当前的变化,其余的marker不变
    对象字面量中可以使用中括号作为属性,表示属性也能是一个变量
    二维数组转化为一维数组 contact 与apply 的结合
    一个对象如何复制给另一个对象,互不影响
    在-for 循环里面如何利用ref 操作dom
    mac 进程管理
  • 原文地址:https://www.cnblogs.com/allencxw/p/8900779.html
Copyright © 2011-2022 走看看