表格的处理

最新推荐文章于 2024-08-04 16:33:59 发布
最新推荐文章于 2024-08-04 16:33:59 发布
阅读量321 收藏
点赞数
文章标签： javascript dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ming514671146/article/details/51584929
版权
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格</title>
    <script>
        var highlightcolor = 'red';//鼠标移上去的颜色
        var clickcolor = '#51b2f6';//单元格原来的颜色
        function changeto() {
            //首先获取点击的对象
            var source;
            if(event.srcElement){
                source = event.srcElement;
            }else if(event.target){
                source = event.target;
            }
            if(source.nodeType == 3){
                source = source.parentNode;
            }
            //首先判断若是由滑过的对象为table或者tr,那么就不再执行后面的代码，因为是滑过的是单元格，那么才会引起该行的变化
            if (source.tagName == "TR" || source.tagName == "TABLE")
                return;
            //这里如果我们鼠标滑动的不是单元格，而是单元格里的元素，那么就应该一层层找到单元格
            while (source.tagName != "TD") {
                source = source.parentElement;
            }
            //这里就是找到了单元格，那么此时我们应该返回的是单元格的行
            source = source.parentElement;
            var cs = source.children;//这里不是source.childNodes
            for (i = 0; i < cs.length; i++) {
                cs[i].style.backgroundColor = highlightcolor;
            }
        }
        function changeback() {
            //首先获取点击的对象
            var source = event.srcElement;
            //首先判断若是由滑过的对象为table或者tr,那么就不再执行后面的代码，因为是滑过的是单元格，那么才会引起该行的变化
            if (source.tagName == "TR" || source.tagName == "TABLE")
                return;
            //这里如果我们鼠标滑动的不是单元格，而是单元格里的元素，那么就应该一层层找到单元格
            while (source.tagName != "TD") {
                source = source.parentElement;
            }
            //这里就是找到了单元格，那么此时我们应该返回的是单元格的行
            source = source.parentElement;
            var cs = source.children;
            for (i = 0; i < cs.length; i++) {
                cs[i].style.backgroundColor ="";
            }
        }
        function checkit() {
            var ch = document.getElementById("checkbox");
            var ss = document.getElementsByTagName("input");
            for (var i = 0; i < ss.length; i++) {
                if (ss[i].type == "checkbox" && ss[i].name != "checkbox") {
                    ss[i].checked = ch.checked;
                }
            }
        }
    </script>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#a8c7ce" οnmοuseοver="changeto()"  οnmοuseοut="changeback()">
    <tr>
        <td width="4%" height="20" bgcolor="d3eaef" class="STYLE10"><div align="center">
            <input type="checkbox" name="checkbox" id="checkbox"  οnchange="checkit();" />
        </div></td>
        <td width="10%" height="20" bgcolor="d3eaef" class="STYLE6"><div align="center"><span class="STYLE10">用户名</span></div></td>
        <td width="15%" height="20" bgcolor="d3eaef" class="STYLE6"><div align="center"><span class="STYLE10">用户角色</span></div></td>
        <td width="14%" height="20" bgcolor="d3eaef" class="STYLE6"><div align="center"><span class="STYLE10">联系方式</span></div></td>
        <td width="16%" height="20" bgcolor="d3eaef" class="STYLE6"><div align="center"><span class="STYLE10">IP地址</span></div></td>
        <td width="27%" height="20" bgcolor="d3eaef" class="STYLE6"><div align="center"><span class="STYLE10">详细描述</span></div></td>
        <td width="14%" height="20" bgcolor="d3eaef" class="STYLE6"><div align="center"><span class="STYLE10">基本操作</span></div></td>
    </tr>
    <tr>
        <td height="20" bgcolor="#FFFFFF"><div align="center">
            <input type="checkbox" name="checkboxlist" id="checkbox2" />
        </div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE6"><div align="center"><span class="STYLE19">admin</span></div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">系统管理员</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">13913612548</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">192.168.0.124</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">用户可以对系统的所有操作进行管理...</div></td>
        <td height="20" bgcolor="#FFFFFF"><div align="center" class="STYLE21">删除 | 查看</div></td>
    </tr>
    <tr>
        <td height="20" bgcolor="#FFFFFF"><div align="center">
            <input type="checkbox" name="checkboxlist" id="checkbox3" />
        </div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">admin</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">系统管理员</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">13913612548</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">192.168.0.124</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">用户可以对系统的所有操作进行管理...</div></td>
        <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE21">删除 | 查看</span></div></td>
    </tr>
    <tr>
        <td height="20" bgcolor="#FFFFFF"><div align="center">
            <input type="checkbox" name="checkboxlist" id="checkbox4" />
        </div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">admin</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">系统管理员</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">13913612548</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">192.168.0.124</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">用户可以对系统的所有操作进行管理...</div></td>
        <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE21">删除 | 查看</span></div></td>
    </tr>
    <tr>
        <td height="20" bgcolor="#FFFFFF"><div align="center">
            <input type="checkbox" name="checkboxlist" id="checkbox5" />
        </div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">admin</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">系统管理员</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">13913612548</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">192.168.0.124</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">用户可以对系统的所有操作进行管理...</div></td>
        <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE21">删除 | 查看</span></div></td>
    </tr>
    <tr>
        <td height="20" bgcolor="#FFFFFF"><div align="center">
            <input type="checkbox" name="checkboxlist" id="checkbox6" />
        </div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">admin</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">系统管理员</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">13913612548</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">192.168.0.124</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">用户可以对系统的所有操作进行管理...</div></td>
        <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE21">删除 | 查看</span></div></td>
    </tr>
    <tr>
        <td height="20" bgcolor="#FFFFFF"><div align="center">
            <input type="checkbox" name="checkboxlist" id="checkbox7" />
        </div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">admin</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">系统管理员</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">13913612548</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">192.168.0.124</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">用户可以对系统的所有操作进行管理...</div></td>
        <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE21">删除 | 查看</span></div></td>
    </tr>
    <tr>
        <td height="20" bgcolor="#FFFFFF"><div align="center">
            <input type="checkbox" name="checkboxlist" id="checkbox8" />
        </div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">admin</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">系统管理员</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">13913612548</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">192.168.0.124</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">用户可以对系统的所有操作进行管理...</div></td>
        <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE21">删除 | 查看</span></div></td>
    </tr>
    <tr>
        <td height="20" bgcolor="#FFFFFF"><div align="center">
            <input type="checkbox" name="checkboxlist" id="checkbox9" />
        </div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">admin</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">系统管理员</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">13913612548</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">192.168.0.124</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">用户可以对系统的所有操作进行管理...</div></td>
        <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE21">删除 | 查看</span></div></td>
    </tr>
    <tr>
        <td height="20" bgcolor="#FFFFFF"><div align="center">
            <input type="checkbox" name="checkboxlist" id="checkbox10" />
        </div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">admin</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">系统管理员</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">13913612548</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">192.168.0.124</div></td>
        <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">用户可以对系统的所有操作进行管理...</div></td>
        <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE21">删除 | 查看</span></div></td>
    </tr>
</table>


</body>
</html>
陆大先生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
计算机表格处理.pptx
11-14
"计算机表格处理" 计算机表格处理是计算机科学领域中的一门重要课程，旨在教授学生如何使用计算机软件对表格进行处理和分析。本节课主要介绍了简单排序、复杂排序、分类汇总和图表方法等知识点。 一、简单排序 ...
表格背景颜色变换
xueronghua111的博客
02-25 229
表格的背景颜色都是无色的,当读过表格中的数据后,背景颜色变为黑色,当在次浏览具体的某一条数据的时候,该条的背景颜色是绿色. 很有意思~ 要完成此效果需要两个步骤 第一步：把如下代码加入到区域中 function changeto(highlightcolor){ source=event.srcElement if (source.tagName=="TR"||sou...
鼠标经过html 表格的行时，进行颜色区分
wl_haanel的专栏
05-12 1545
css： .trA TD{     background:#fff; } .trB TD{     background:#99ffcc; }
html中table中标签的使用注意
lnn2007的专栏
09-15 1066
abc –abc   1 出现的情况更不一样。。。看dom 2 在table标签中默认把tr标签里面没有td标签的文本属性设置一个td标签放在最前面。
简单的网站设计 知识点记录
dengweidan3299的博客
09-27 115
本博客所有文章如果没加特殊说明均为原创，如需转载引用请注明地址：[SuperXJ博客：http://www.cnblogs.com/SuperXJ/] 本人联系QQ 67666938Email perfectxiong@gmail.com这2个星期主要就在做网页，也了解到了许多新知识，比如VML：专门用来在浏览器上画矢量图，javascript 不说了，客户端程序，和J...
excel 表格处理工具
04-10
在IT领域，Excel表格处理工具是日常工作中的得力助手，特别是在数据分析、报表制作以及信息整理等方面。本工具针对Excel的功能进行了扩展，提供了保留表头表尾、按内列内容分类和拆分成独立表格等实用特性，极大地...
python之表格处理模块（xlrd，openpyxl，csv）和常用表格数据处理代码函数实例
02-23
Python中的表格处理涉及到了几个关键模块，包括xlrd、openpyxl和csv，这些模块都是为了方便地操作和处理表格数据。在Python中，处理表格数据对于数据分析、报告生成、数据导入导出等任务至关重要。 **xlrd模块**...
计算机基础实验报告电子表格处理.doc
11-29
"计算机基础实验报告电子表格处理.doc" 本实验报告主要介绍了电子表格处理的基本操作和技术，旨在掌握工作表和工作簿的建立、编辑、格式化等基本操作，掌握公式和基本函数的使用，掌握数据清单的管理操作，以及掌握...
python 表格处理继续完善
06-23
python 表格处理继续完善
js--表格操纵之 鼠标经过整行变色
unback的专栏
09-04 1104
今天在网上发现了一个不错的表格操纵的东西 保存下来以后用   #tb{width:666px;border-collapse:collapse;border:1px solid #EEE;font-size:14px;} #tb th{background:#EEE;border-bottom:1px solid #CCC;padding:4px;} #tb td{border:1px s
用法比较简单的行高亮
fly533的专栏
03-09 111
[code="javascript"] //另外的高亮 调用方法 var highlightcolor='#c1ebff';//c1ebff //此处clickcolor只能用win系统颜色代码才能成功,如果用#xxxxxx的代码就不行,还没搞清楚为什么:( var clickcolor='#51b2f6';//51b2f6 function changeto(){ sourc...
【堡垒机】 jumpserver权限划分以及如何使用
邢宁
09-19 5727
一、简介 1、测试环境由一台服务端对两台客户端进行权限控制。 2、服务端ssh端口为51612，客户端端口为54213。 3、用户组创建三个级别，分别为运维组、工作组、只读组 4、命令别名设置三个级别，分别为ROOT、WORK、RD 5、jumpserver默认管理用户必须使用root，但考虑到安全，创建jieyue进行管理。 6、设置客户端均不能使用root进行远程登录。 二、安装jumpserver3.0 安装步骤请查看我的上一篇博客，这里就不介绍了。 三、设置默认管理用户 1、必须在服务端、客户端上
Html Table表格编辑（添加删除行，单元格）
weixin_34150830的博客
12-08 620
项目中一个新的需求，需要用js来编辑一个表格，包括添加一行，删除一行，添加一个单元格，删除一个单元格 注：示例代码不包括删除列和添加列 下面是js 1 　　　　<script> 2 function addover(div) { 3 $(div).html("+"); 4 } 5 ...
CentOS下搭建Jumpserver堡垒机
qq_40907977的博客
11-18 1645
什么是堡垒机？ 堡垒机，即在一个特定的网络环境下，为了保障网络和数据不受来自外部和内部用户的入侵和破坏，而运用各种技术手段监控和记录运维人员对网络内的服务器、网络设备、安全设备、数据库等设备的操作行为，以便集中报警、及时处理及审计定责。 用一句话来说，堡垒机就是用来后控制哪些人可以登录哪些资产（事先防范和事中控制），以及录像记录登录资产后做了什么事情（事溯源） 堡垒机很多时候也叫运维审计系统，它的核心是可控及审计。可控是指权限可控、行为可控。权限可控，比如某个工程师要离职或要转岗了。如果没有一个统一的权限管
jumpserver 堡垒机配置使用（图文详解）
weixin_33688840的博客
03-28 4595
上一章博客介绍了 jumpserver 环境的搭建及配置，下面这篇文章介绍 jumpserver 如何使用及使用户通过jumpserver 堡垒机进行登录系统。 如果想看 jumpserver 堡垒机安装： http://blog.csdn.net/wanglei_storage/article/details/51001810 ...
Table 可以拖动效果
weixin_33694620的博客
01-15 356
css： .resizeDivClass{width:1px;margin:0px 0 0px 0;filter:alpha(opacity=0); background-color:Red; float:right;cursor:e-resize;} JS： function MouseDownToResize(obj){ setTableLayoutToFix...
收藏十一种常用简单实用漂亮的HTML表格样式
热门推荐
jipin246的专栏
03-05 2万+
收集了十一种常用简单漂亮的表格样式。有时候用文章中用上表格，会显得段落分明的效果，收到意想不到的效果。我下面用的是第三种效果 第一种：单格样式，可以不定义宽度，把width="100%"去掉即可： bordercolorlight="#333333" border="0"> 晓龙工作室   第二种：
牛客JS题（二十一）数组扁平化
最新发布
不起眼小菜菜的博客
08-04 832
注释很详细，直接上代码……
winfromexcel表格处理
05-10
Winform Excel表格处理指的是在Windows forms应用程序中对Excel表格进行读取和操作的过程。Excel表格处理是电子表格中最常用的任务之一。Winform Excel表格处理是为了方便用户在应用程序中快速操作Excel表格而设计的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值