js如何实现动态点击改变单元格颜色？

一、总结

1、通过table的rows属性，遍历表格所有行，然后通过cells属性，遍历每一行中的单元格。

2、遍历的过程中，动态的为每一个单元格定义单击事件，改变单元格的背景色

二、js如何实现动态点击改变单元格颜色？

1、动态改变单元格背景色案例

  • 实例描述：

    单击单元格后改变其背景颜色,再次单击则恢复之前样式

  • 案例要点：
    1. 通过table的rows属性，遍历表格所有行，然后通过cells属性，遍历每一行中的单元格。
    2. 遍历的过程中，动态的为每一个单元格定义单击事件，改变单元格的背景色

2、用到的表格属性和方法

Table 对象集合
  • cells[] 返回包含表格中所有单元格的一个数组。

    语法：tableObject.cells[]

  • rows[] 返回包含表格中所有行的一个数组。

    rows 集合返回表格中所有行的一个数组。该集合包括 thead、tfoot 和 tbody 中定义的所有行。

三、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>表格专题</title>

 </head>

 <body>

     <table id="tab" border="1">

     <caption>表格名称</caption>

     <thead>

         <tr>

             <th colspan="3">标题1</th>

         </tr>

     </thead>

     <tbody>

         <tr>

             <td>单元格11</td>

             <td>单元格12</td>

             <td>单元格13</td>

         </tr>

         <tr>

             <td>单元格21</td>

             <td>单元格22</td>

             <td>单元格23</td>

         </tr>

         <tr>

             <td>单元格31</td>

             <td>单元格32</td>

             <td>单元格33</td>

         </tr>

         </tbody>

         <tfoot><td>备注：</td><td colspan="2"></td></tfoot>

     </table>

     <script type="text/javascript">

     /*

         var tab=document.getElementById('tab') //获取表格元素

         var rows=tab.rows; //返回包含表格中所有行的一个数组。

         var rlen=rows.length;

         alert(rlen)

         //var cells=tab.cells;

         //var clen=cells.length //这种写法会出错

         cells=rows[1].cells //某一行的单元格

         alert(cells.length)

         */

         function tabCell(){

          var tab=document.getElementById('tab')

          var rows=tab.rows;

          var rlen=rows.length;

          for (var i = 1; i <rlen; i++) { //遍历所有行

              var cells=rows[i].cells; //得到这一行的所有单元格

              for (var j = 0; j < cells.length; j++)

              {

                  //给每一个单元格添加click事件

                  cells[j].onclick=function(){

                      if (this.style.background=='') {

                      this.style.background='green'

                      }else{

                          this.style.background=''

                      }

                  }

              }

          }

         }

         tabCell()

     </script>

 </body>

 </html>

四、测试题-简答题

1、如何动态给元素添加点击事件？

解答：cells[j].onclick=function(){函数体}。

2、如何动态的获取元素的背景属性？

解答：if (this.style.background=='')。

3、table表格的行（rows）属性和列属性（或者说单元格属性cells）的关系？

解答：行包含单元格（cells是rows的属性），var cells=rows[i].cells; //得到这一行的所有单元格。

4、如何动态的获取元素？

解答：var tab=document.getElementById('tab')。

5、如何动态从表格中取到某个单元格的dom对象？

解答：通过table的rows属性，遍历表格所有行，然后通过cells属性，找到我们需要的单元格。

6、如何判断js中某个标签是否设置了背景色属性？

解答：获取标签对应的dom对象，然后判断dom对象的style的background属性是否为空字符串。if (this.style.background=='')。

js如何实现动态点击改变单元格颜色？的更多相关文章

  1. ABAP 动态内表添加单元格颜色字段

    *动态内表alv显示时要求某些单元格显示颜色 *wa_fldcat-datatype不能添加LVC_T_SCOL类型,在创建好内表之后,再添加颜色列. DATA: wa_fldcat TYPE lvc ...

  2. easyui的datagrid改变单元格颜色

    另一种方法:https://www.cnblogs.com/raitorei/p/10395233.html easyui的datagrid改变整行颜色:https://www.cnblogs.com ...

  3. sencha gridpanel改变单元格颜色

    标题列包含 审核通过则绿色,包含拒绝为红色: { xtype: 'gridcolumn', renderer: function(value, metaData, record, rowIndex, ...

  4. DevExpress控件-GridControl根据条件改变单元格(Dev GridControl 单元格着色)

    DevExpress控件-GridControl根据条件改变单元格颜色,如下图: 解决办法:可以参考:http://www.cnblogs.com/zeroone/p/4311191.html 第一步 ...

  5. Gridview 重建表头/单击单元格弹出对话框/改变单元格背景色

    整理工作~ 完整的代码在GitHub上, 路径: 项目背景:追踪某个issue,并且记录每天的状态. 要求:1.点击日期就能更改,并且用颜色标志不同的状态 2.增加按钮可关闭issue 3.布局要求日 ...

  6. DevExpress控件-GridControl根据条件改变单元格/行颜色--转载

    DevExpress控件-数据控件GridControl,有时我们需要根据特定条件改变符合条件的行或者单元格颜色达到突出显示目的,现在动起鼠标跟我一起操作吧,对的,要达到这个目的您甚至都不用动键盘. ...

  7. gridview根据条件来改变行的颜色以及改变单元格的颜色。

    gridview根据条件来改变行的颜色以及改变单元格的颜色. 通过在RowDataBound事件中写代码来实现,见代码. protected void GridView1_RowDataBound(o ...

  8. DevExpress控件-GridControl根据条件改变单元格/行颜色(Dev GridControl 单元格着色) z

    DevExpress控件-数据控件GridControl,有时我们需要根据特定条件改变符合条件的行或者单元格颜色达到突出显示目的,现在动起鼠标跟我一起操作吧,对的,要达到这个目的您甚至都不用动键盘. ...

  9. Swift - 实现点击UITableView单元格时自动展开单元格

    下面是一个列表单元格cell的折叠展开效果的demo.当点击单元格时会展开该单元格,便于显示一些详情什么的.点击其他单元格原来的会关闭,同时有动画效果. 效果如如下:   代码如下: 1 2 3 4 ...

随机推荐

  1. 【2017"百度之星"程序设计大赛 - 初赛（B）】小小粉丝度度熊

    [链接]http://acm.hdu.edu.cn/showproblem.php?pid=6119 [题意] 在这里写题意 [题解] 先把相交的部分合成一个区间. 这个可以用排序,加个简单的处理就能 ...

  2. Spring3拦截引发的问题——WEB开发中的client路径

    什么是client路径? 第一类.也就是html或js文件等client訪问的文件里的路径,这里包含一些资源文件的引入(js.css还有各种图片等),或是跳转到静态html页面,总之获取的都是静态资源 ...

  3. js数组遍历和对象遍历小结

    数组的遍历 for循环 for(var j = 0,len = arr.length; j < len; j++){ console.log(arr[j]); } forEach,性能比for还 ...

  4. 二、MongoDB基础知识

    1.文档是MongoDB的核心概念.文档就是键值对的一个有序集{'msg':'hello','foo':3}.类似于python中的有序字典. 需要注意的是: #1.文档中的键/值对是有序的. #2. ...

  5. 【Codeforces Round #432 (Div. 2) B】Arpa and an exam about geometry

    [链接]h在这里写链接 [题意] 给你3个点A,B,C 问你能不能将纸绕着坐标轴上的一点旋转.使得A与B重合,B与C重合 [题解] 这3个点必须共圆. 则A,B,C不能为一条直线.否则无解. 共圆之后 ...

  6. （转）linux的一个find命令配合rm删除某天前的文件

    转自:http://www.cnblogs.com/mingforyou/p/3930624.html 语句写法:find 对应目录 -mtime +天数 -name "文件名"  ...

  7. 如何使用 PyCharm 将代码上传到远程服务器上（详细图解）

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 一丶测试说明 1.通过Windows电脑上的PyCharm,将代码上传到虚拟机Ubuntu系统中 需要在虚拟机中安装Ubuntu的 ...

  8. Spring+Struts2+Hibernate的整合

    这篇主要采用Maven搭建Spring+Struts2+Hibernate的整合项目,复习一下SSH框架,虽然spring提供自己的MVC框架, 但是Spring也提供和其他框架的无缝整合,采用组件形 ...

  9. HttpClient请求发送的几种用法二：

    public class HttpClientHelper    {        private static readonly HttpClientHelper _instance = new H ...

  10. Android中CursorLoader的使用、原理及注意事项

    前言 最近在项目中涉及到了即时聊天,因此不可避免地要用到实时刷新的功能,因为在以前的项目中见到别人使用CursorLoader+CursorAdapter+ContentProvider的机制来实现实 ...