鼠标经过改变表格背景属性实例

最新推荐文章于 2024-04-25 14:49:41 发布
最新推荐文章于 2024-04-25 14:49:41 发布
阅读量413 收藏
点赞数
分类专栏： javaSrcipt常用函数 文章标签： function xhtml table html border class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuan8080/article/details/5606063
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<style type="text/css">
.tab table{ border-collapse:collapse; width:500px;}
.tab td{ border:1px solid #999; height:26px;}
</style>
</head>

<body>
<div  class="tab">
<table width="100%" cellspacing="0" cellpadding="0" id="tab">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</div>
<script type="text/javascript">
var t=document.getElementById("tab");
var tr=t.rows;
for(i=0;i<tr.length;i++){
tr[i].οnmοuseοver=Function("c("+i+")");
tr[i].οnmοuseοut=Function("r("+i+")");
}
function c(n){
    if(n+1>tr.length-1){n=n-1}
    tr[n].style.background='#F00';
    tr[n+1].style.background='#F00';
}
function r(n){
    if(n+1>tr.length-1){n=n-1}
    tr[n].style.background='none';
    tr[n+1].style.background='none';
}
</script>
</body>
</body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<style type="text/css">
.tab table{ border-collapse:collapse; width:500px;}
.tab td{ border:1px solid #999; height:26px;}
</style>
</head>

<body>
<div  class="tab">
<table width="100%" cellspacing="0" cellpadding="0" id="tab">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</div>
<script type="text/javascript">
var t=document.getElementById("tab");
var tr=t.rows;
for(i=0;i<tr.length;i++){
tr[i].οnmοuseοver=Function("c("+i+")");
tr[i].οnmοuseοut=Function("r("+i+")");
}
function c(n){
    if((n)%2!=0){n=n-1}
    tr[n].style.background='#F00';
    tr[n+1].style.background='#F00';
}
function r(n){
    if((n)%2!=0){n=n-1}
    tr[n].style.background='none';
    tr[n+1].style.background='none';
}
</script>
</body>
</body>
</html>

Ade子夜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java源码包---java 源码 大量 实例
04-18
5个目标文件，演示Address EJB的实现，创建一个EJB测试客户端，得到名字上下文，查询jndi名，通过强制转型得到Home接口，getInitialContext()函数返回一个经过初始化的上下文，用client的getHome()函数调用Home接口...
php可编辑表格实例,jQuery做出可编辑表格（附代码）
weixin_30077373的博客
04-04 214
这次给大家带来jQuery做出可编辑表格(附代码)，jQuery做出可编辑表格的注意事项有哪些，下面就是实战案例，一起来看一下。/p>jq2—可以编辑的表格--%>鼠标点击表格项就可以编辑学号姓名000001张三000002李四000003王五000004赵六css代码：body {}table {border:1px solid #000000;border-collapse:col...
python子类继承父类属性实例_python子类如何继承父类的实例变量？
weixin_39849127的博客
11-24 367
类型1：父类和子类的实例变量均不需要传递class A(object):def __init__(self):self.name = "cui"def get_name(self):return self.nameclass B(A):def __init__(self):super(B,self).__init__()self.age = 12b = B()类型2：父类的实例变量不需要传递，子类...
java td背景色_html中如何实现表格移入移出时背景颜色改变？（两种方法）
weixin_39773239的博客
02-26 126
html中如何实现表格移入移出时背景颜色改变？(两种方法)一、总结1、通过css的table标签的hover属性：10 #tab:hover{11 background: green 12 }2、通过js的onmouseover(),onmouseout()事件：16 51 functionchange(c){52 vartab=document.getElementByI...
html css 鼠标移动位置,在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)...
weixin_39957835的博客
06-04 1014
映射鼠标位置或实现拖拽效果，我们可以在 JavaScript 中做到这一点。但实际上，在CSS中有更加简洁的方法，我们可以在不使用JavaScript 的情况下，仍然可以实现相同的功能！只使用CSS就可以实现模仿鼠标"点击和拖动"效果，让我们来看看如何获得用户的鼠标位置，并将其映射到 CSS 自定义属性：--positionX 和 --positionY 中。下面是具体实现步骤。初始化我们的第一个...
js开发实例 —— 表格隔行变色&表单全选取消全选
mocoll的博客
08-21 184
七、表格隔行变色 思路： ①用到新的鼠标事件鼠标经过onmouseover鼠标离开onmouseout ②核心思路:鼠标经过tr行，当前的行变背景颜色，鼠标离开去掉当前的背景颜色 ③注意:第一行( thead里面的行)不需要变换颜色,因此我们获取的是tbody里面的行 HTML 代码： JS 代码： 八、表单全选取消全选 思路： ① 全选和取消全选做法:让下面所有复选框的checked属性(选中状态)跟随全选按钮即可。 ② 下面复选框需要全部选中，上面全选才 能选中做法:给下面所有复选框绑定点击事
Vue经典实例之table表格奇偶行不同颜色、鼠标移入变色、点击变色，一看就明白
编程界明世隐的博客
12-10 4424
最主要就是用到属性的绑定 :class <!DOCTYPE html> <html> <head> <meta charset="GBK"> <title></title> <style> * { margin: 0px; padding: 0px; } body { .
CSS_02_背景_文本_字体_链接_列表_表格
pre_eminent的JAVA学习园地
03-10 740
CSS 背景CSS 背景属性用于定义HTML元素的背景。CSS 属性定义背景效果：background-color    颜色background-image  图片background-repeat  重复background-attachment  滚动background-position  位置补充一下:background-attachment :定义背景图片随滚动轴的滚动方式取值: s...
CSS常用属性之（列表、表格、鼠标）属性，（如果想知道CSS的列表、表格、鼠标相关的属性知识点，那么只看这一篇就足够了！）
最新发布
秋刀鱼不做梦的编程日常
04-25 1441
CSS常用属性之（列表、表格、鼠标）属性，（如果想知道CSS的列表、表格、鼠标相关的属性知识点，那么只看这一篇就足够了！）
html中如何实现表格移入移出时背景颜色改变？（两种方法）
weixin_33827590的博客
05-29 157
html中如何实现表格移入移出时背景颜色改变？（两种方法） 一、总结 1、通过css的table标签的hover属性： 10 #tab:hover{ 11 background: green 12 } 2、通过js的onmouseover(),onmouseout()事件： 16 <table id="tab" b...
python gui 显示表格_python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性...
weixin_39862847的博客
11-30 1123
QTableWidget介绍QTableWidget是Qt程序中常用的显示数据表格的控件，类似于c#中的DataGrid。QTableWidget是QTableView的子类，它使用标准的数据模型，并且其单元数据是通过QTableWidgetItem对象来实现的，使用QTableWidget时就需要QTableWidgetItem。用来表示表格中的一个单元格，整个表格就是用各个单元格构建起来的QT...
Visual C# .NET精彩编程实例集锦
12-20
实例124 如何显示和修改数据库中的图像信息 实例125 如何使用水晶报表向导创建报表 第7章 网络应用 ---------------------------------- 实例126 如何下载网页 实例127 如何上下载文件 实例128 如何自制浏览器 实例...
JAVA上百实例源码以及开源项目源代码
09-17
5个目标文件，演示Address EJB的实现，创建一个EJB测试客户端，得到名字上下文，查询jndi名，通过强制转型得到Home接口，getInitialContext()函数返回一个经过初始化的上下文，用client的getHome()函数调用Home接口...
javascript网页特效实例大全
01-25
5.4 鼠标经过时改变文本颜色 99 5.5 鼠标驱动图片变化 100 5.6 鼠标悬停时背景色改变 101 5.7 鼠标右键弹出对话框 102 5.8 鼠标的图片旋转跟踪 103 5.9 旋转的鼠标光环 105 5.10 跟随鼠标旋转的文字 107 5.11...
正则表达式匹配数字,斜杠一个或多个
热门推荐
yuan8080的专栏
12-03 2万+
使用match它时，如果没有设置全局标志 (g)，数组的 0 元素包含整个匹配，而第 1 到 n 元素包 含了匹配中曾出现过的任一个子匹配。这相当于没有设置全局标志的 exec 方法。如果设置了全局 标志，元素 0 到 n 中包含所有匹配。 //匹配斜杠一个或多个斜杠      var results=m.match(new RegExp("///+","gi"));      //匹配数字一个或多个  var results=str.match(new RegExp("//d+","gi"))
javascript鼠标双击时触发事件大全4
yuan8080的专栏
05-19 5745
javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3、N2 鼠标点击时触发此事件 ondblclick IE4、N4 鼠标双击时触发此事件 onmousedown IE4、N4 按下鼠标时触发此事件 onmouseup IE4、N4 鼠标按下后松开鼠标时触发此事件 onmouseover IE3、N2 当鼠标移动到某对象范围的上方时触发此事件 onmousem
文字太长换行和解析html标签
yuan8080的专栏
11-10 3264
<br /><table width="100%" border="0" cellspacing="0" cellpadding="0" style="WORD-WRAP: break-word" ><br />  <tr><br />  <td class="executive_td"><br />   Website:<br />   </td><br />  </tr><br />  <tr><br />           <td nowrap="nowrap"><br /><div style="
在jsp 中加锚点
yuan8080的专栏
12-16 2860
<br /><%-- <a href="javascript:void(0)" class="btn_hSave29" style="text-decoration: none;" <br /><!--style="text-decoration: none;"  把下划线去掉 --> 要设锚点的id 即可<br /> <br /> onclick="document.getElementById('contact_temp_id').scrollIntoView();">Contact Candidate
vue element 表格的属性修改后页面不更新
09-20
当我们修改 Vue 中数据的属性值时...总结一下，当我们在 Vue Element 表格中修改属性后页面不更新时，可以使用 Vue.set 方法或手动触发更新的方式来解决这个问题。我们需要根据具体情况选择最合适的方法来解决此问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值