JavaScript实现单击行变颜色

最新推荐文章于 2022-03-23 11:25:12 发布
最新推荐文章于 2022-03-23 11:25:12 发布
阅读量961 收藏
点赞数
文章标签： javascript xhtml table html function 算法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dengfengwang/article/details/4807840
版权

 

<!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=utf-8" />
<title><!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=utf-8" />
<title>JavaScript实现单击行变颜色</title>
<style>
table{
   border-bottom:solid 1px;
   border-top:solid 1px;
   border-left:solid 1px;
   border-right:solid 1px;
}
table td{
   border-bottom:solid 1px;
   border-top:solid 1px;
   border-left:solid 1px;
   border-right:solid 1px;
}
</style>

<script language="javascript">
window.onload = function(){
   var table = document.getElementById("t1"); //得到table元素

   var tbodys = table.childNodes;//一般IE会自动加一个tbody（可以手动加），关于tbody不在赘述，自己到网上查吧！
   for(var i = 0; i < tbodys.length ; i++){//遍历table下的tbody元素
      var trs = tbodys[i].childNodes;
      for(var j = 0 ; j < trs.length ; j++){//遍历tbody下的tr元素
         trs[j].onclick = function(){//给每一行添加一个onclick事件，也就是给tr注册一个事件
            if(this.style.backgroundColor == "red"){//当单击事件被触发的时候，单击一次变为红色，再次单击变为白色
               this.style.backgroundColor = "white";
            }else{
               this.style.backgroundColor = "red";
            }
            var n = this.parentNode.firstChild;
            for ( ; n; n = n.nextSibling ) {//遍历当前行的兄弟节点，让其所有兄弟节点都变成白色
               if ( n.nodeType == 1 && n != this )
               n.style.backgroundColor = "white";
            }   
         }
      }
   }

}
/*遍历兄弟节点的算法，摘自Jquery，很经典的算法*/
//function getSiblings(elem){
// var r = [];
// var n = elem.parentNode.firstChild;
// for ( ; n; n = n.nextSibling ) {
//  if ( n.nodeType == 1 && n != elem )
//   r.push( n );
// }
// return r;
//};

</script>
</head>

<body>
<table width="1000" border="0" cellspacing="0" id="t1">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <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>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <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>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <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>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <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>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <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>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <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>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <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>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <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>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <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>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

第一次写技术ＢＬＯＧ，有误之处请多多指证，欢迎转载！

如有技术问题讨论，也欢迎加入QQ群：68785618

踏雪浪人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript+css实现单击颜色褪去效果
10-30
### JavaScript+CSS 实现单击颜色褪去效果 #### 知识点概述 本文将详细介绍如何使用JavaScript与CSS结合来实现一个简单的单击颜色褪去效果。这种效果常见于网页设计中，当用户点击某个按钮时，背景颜色或文本颜色...
单击某一段文字改写文本颜色
09-04
这里我们讨论的案例是通过单击某段文字来改变其颜色，实现文字在红色和黑色之间的切换。这个功能对于交互式网页设计来说非常常见，可以提升用户体验。 首先，我们看到HTML部分，它包含了一系列`<p>`标签，用于表示...
js当行变色点击变色鼠标滑过变色
青青的专栏
10-14 4091
<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd"><br /><HTML><br /><HEAD><br /><TITLE>隔行变色、响应鼠标滑过行变色、点击行变色丨中国技术教程网</TITLE><br /><style type="text/css"><br /><!--<br />A{ FONT-SIZE: 14px; COLOR: #C
JS的一些简单应用 —— 点击变色(1次)
烟敛寒林的博客
05-17 910
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;style &amp;gt; div { width: 300px; height: 300px; } #test1 { background: green; } #test2 {
JS实现点击单元格改变所在行颜色（最简代码）
王世洪的博客
03-23 2331
我以前也发布过通过“JS实现点击单元格改变所在行颜色”的博客，不过都是以前初出茅庐的时候写的，代码不够简化。 前段时间发现还有其他方式可以实现该效果，而且只需要一行代码，所以再发布一条，供大家参考使用。 1、最受青睐 功能： ① 点击改变行颜色，无论原本有无背景色； ② 点击其他行则清除背景，恢复背景色和颜色 操作： 添加加载结束事件（其他类型报表也通用）： //使点击的行变色 contentPane.makeHighlight('#FFF4C4','',true); ..
财经类的表格变色写法 几行代码搞定 简单易懂
SanRenKing的博客
11-27 201
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { m
DataGrid中鼠标单击行改变颜色
zgqtxwd的专栏
04-24 395
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
单击表格变换颜色特效代码
03-20
要实现单击变换颜色，需要监听用户的点击事件。在JavaScript中，可以使用`addEventListener`方法来添加事件监听器。例如，为表格中的所有单元格添加`click`事件监听器。 4. **JavaScript代码实现**： - 首先，...
JavaScript实现点击按钮字体放大、缩小
11-23
本文将深入探讨如何使用JavaScript实现点击按钮时字体的放大和缩小功能。 首先，我们看到HTML部分包含了几个按钮，每个按钮都有一个特定的ID，如`switcher-default`, `switcher-hidden`, `switcher-large`, `...
javaScript如何改变页面颜色
weixin_45246071的博客
07-09 745
改变页面颜色，每隔1s改变一次 第一种： <script type="text/javascript"> window.onload = function(){ changeColor(); } function changeColor(){ var r = parseInt(Math.random() * 255); var g = parseInt(Math.random() * 255); var b = parseInt(Math.random(
js鼠标单击改变行的颜色
MaWenWu专栏
11-08 1203
 <!--var color="";var uid = 0; function Color(obj){ obj.style.backgroundColor="#CDDEE7"; uid = obj.title; if(!(color==""||color==obj.id)){ document.getElementById(color).style.backg
JavaScript点击事件换字体颜色
tlmis的博客
12-13 7509
点击按钮可以换字体颜色 可以自己看看 <div class="color"> <button>red</button> <button>black</button> <button>yellow</button> <button>bl...
js 选择表的行变颜色
DaturaJie的专栏
08-02 1043
var selectedRow=null;    function col(obj){   obj.style.backgroundColor='534543'; //点击的行变颜色;   if(selectedRow!=null) selectedRow.style.removeAttribute("backgroundColor");   if(selectedRow==obj) se
JS实现点击行改变颜色
王世洪的博客
09-20 2365
在实际项目开发中，有些开发出来的报表的数据量是比较大的，或者是多维度的大数据分析报表，在这个时候，为了观察方便，我们一般会对报表进行底色区分，改变每个隔行的颜色，方便用户对报表数据进行阅读。 然而，有些应用场景中，隔行区分颜色不一定能满足阅读的需求，或报表页面中有分模块的颜色区分，此时用隔行颜色差对页面的色彩布局影响不是很好；用户实际应用时，希望的是在用户点击单元格时，改变当前单元格所在行的背景...
JavaScript 实现点击div换颜色
热门推荐
cyanciel的专栏
12-27 2万+
Change Color 点我试试 //这个事件的目的是：当我们点击时要怎么处理 function changeColor(obj) { //因为JS会把HTML标签当做一个对象 //对象.属性 = 值; obj.style.background = 'pink'; }
JavaScript：点击变颜色
weixin_44848852的博客
01-27 684
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <ul name="boxs" id="box"> <li>000</li> <li>111</li> <li>222</li> <li>333</li> <li&gt
js基础练习（四）
flqbestboy的专栏
08-10 6667
练习： 通过循环按行顺序为一个5×5的二维数组a赋1到25的自然数，然后输出该数组的左下半三角。试编程。 1   2   3   4   5 6   7   8   9   10 11 12 13 14  15 16 17 18 19  20 21 22 23 24  25 var arr=[]; for(var i=0;i<5;i++){
JAVASCRIPT之导航栏鼠标点击变色特效
netuser1937的博客
02-08 7032
JAVASCRIPT之导航栏鼠标点击变色特效
编写Javascrip代码，实现单击鼠标改变背景颜色
最新发布
04-26
好的，关于您的问题，以下是一个简单的JavaScript代码实现单击鼠标改变背景颜色： ```javascript document.addEventListener("click", function() { document.body.style.background = "red"; // 更改背景颜色为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值