1,一行变色

<script>
function trBg(){
var tab=document.getElementById("table");
var tr=tab.getElementsByTagName("tr");
for(var i=;i<tr.length;i++){
if(i%==){
tr[i].style.backgroundColor="#fff"; tr[i].onmouseover=function(){
this.style.background="red";
};
tr[i].onmouseout=function(){
this.style.background="#fff";
}
}else{
tr[i].style.backgroundColor="#fff"; tr[i].onmouseover=function(){
this.style.background="blue";
};
tr[i].onmouseout=function(){
this.style.background="#fff";
}
}
}
}
window.onload=trBg;
</script>
<table id="table" border="" width="" cellspacing="" cellpadding="">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

2,十字叉变色

<table id="table" border="" width="" cellspacing="" cellpadding=""></table>

<script>

    var html = '';
for(var i = ; i < ; i++){
html += '<tr>'
for(var j = ; j < ; j++){
html += '<td data-index="'+ i + '-' + j +'">' + i + '-'+ j + '</td>'
}
html += '</tr>'
}
document.getElementById("table").innerHTML = html; var table = document.getElementById("table");
if(table.rows.length > ){
var rows = table.rows;
for(var i=; i<rows.length; i++){
(function(i){
var tds=rows[i];
for(var j=; j<tds.cells.length; j++){
var obj=tds.cells[j];
obj.onmouseover=function(e){
var val = this.getAttribute('data-index');
var x = val.split('-')[];
var y = val.split('-')[];
console.log(val) var tds = document.getElementsByTagName("td");
for(var k=; k<tds.length; k++){
tds[k].style.backgroundColor="#fff";
} table.rows[i].style.backgroundColor="red"; for(var k=; k<rows[i].cells.length; k++){
table.rows[x].cells[k].style.backgroundColor="red";
}
for(var k=; k<rows.length; k++){
table.rows[k].cells[y].style.backgroundColor="red";
} };
}
})(i)
} }
</script>

JS实现table表格在鼠标移动出现一行变色或者十字叉变色的更多相关文章

  1. js 实现table表格拖拽和点击表头升降序排序

    js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...

  2. js创建table表格

    //js创建table表格var tr;var cell;for(var i=0;i<10;i++){ //创建一个tr tr=document.createElement('tr'); doc ...

  3. 第十三篇 JS 操作table表格

    JS 操作table表格 这节课难度可能高一点,因为没有提前解释if判断.for循环.这节课是直接把这两样用上了,老师先简单介绍一下: if,判断语句,判断就很简单了嘛,假如说1=1(1等于1),当然 ...

  4. 原生js封装table表格操作,获取任意行列td,任意单行单列方法

    V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...

  5. JS获取table表格任意单元格值

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

  6. js实现在表格中删除和添加一行

    <!DOCTYPE html><html> <head> <title> new document </title> <meta ht ...

  7. 纯JS 将table表格导出到excel

    html <div > <button type="button" onclick="getXlsFromTbl('tableExcel','myDiv ...

  8. JS+CSS - table 表格固定表头和第一列、内容可滚动 (转载)

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. js操作table表格导出数据到excel方法

    js导出excel资料很少,网上也找了很多,基本都不能用,要么只能是IE用,还必须要权限,这是非常不好的.后来到github上找到table2excel.js,虽然可以用,但仍然对IE支持不够,也算不 ...

随机推荐

  1. android手机使用Fiddler

    Fiddler是一款免费的抓包.调试工具,比Wireshark要小巧,更简洁,这里介绍如何通过WIFI来抓取Android手机的HTTP和HTTPS包. 一.手机端配置 电脑配置WIFI后,手机需要设 ...

  2. kubernetes系列:(三)、helm的安装和使用

    一.helm简介 kubernetes : 解决了容器维护的难题,通过yaml编写,比如deployment,job,statefulset.configmap等等,通过控制循环,让容器镜像便于管理, ...

  3. 通过正则把文本里的链接加上a标签

    把文本里的链接替换成a标签 function addLinks($text) { return preg_replace('/(http[s]?:\/\/[A-Za-z0-9]+\.[A-Za-z0- ...

  4. Java多线程(3):wait()/notify()实例

    下面是代码实例 public class WaitDemo implements Runnable { private Object lock; public WaitDemo(Object lock ...

  5. Element Children

    The childNodes property contains all of the immediate children of the element. There is a significan ...

  6. Node、Document关系的探究

    上图来自于<JavaScript权威指南(第六版)>P375 受到上图的启发,写了如下测试代码: var head = document.getElementsByTagName(&quo ...

  7. Linux :linux磁盘分区(普通分区2T以内),安装免安装版mysql(tar.gz)

    1.磁盘分区: 1 以root身份登录 查看磁盘信息(自行选择需要使用的磁盘,此处只需要了解信息) fdisk –l 创建新硬盘 fdisk /dev/vdb (决定使用哪个磁盘) 输入n回车,再输入 ...

  8. linux下mysql设置主从

    一  主服务器修改 mysql的主从设置主要原理是 主数据库开启日志,并且创建从服务器专属账户,从服务器用该账户,读取到日志进行同步 准备两个mysql数据库(如何安装请查看,linux下mysql安 ...

  9. cisco RIP(传闻协议)Routing information protocol

    Corp(config)#rout rip Corp(config-router)#network 10.0.0.0 10.0.0.0/24 is subnetted, 5 subnets C 10. ...

  10. springcloud zookeeper+gateway

    搭建springcloud项目的时候以 zookeeper为注册中心  gateway为路由 启动时出现以下报错: ****************************************** ...