JS表格点击每一行颜色变化的问题

xwbbwx110 2012-05-11 10:16:25

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>homework1.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">


<script type="text/javascript">
window.onload = function(){
var tr = document.getElementsByTagName("tr");
for(var i=1;i<tr.length;i++){
tr[i].onclick = function(){
changecolor(this);
}
}
}

function changecolor(obj){
obj.style.backgroundColor= "red";
}
</script>

</head>

<body>
<table border="1" style="background-color: blue">
<tr><td>商品名</td><td>单价</td><td>数量</td></tr>
<tr><td>蛋糕</td><td>20</td><td>3</td></tr>
<tr><td>葡萄</td><td>12</td><td>2</td></tr>
<tr><td>苹果</td><td>10</td><td>4</td></tr>
<tr><td>芒果</td><td>19</td><td>5</td></tr>
<tr><td>荔枝</td><td>8</td><td>2</td></tr>
</table>
</body>
</html>

上面这个代码鼠标点击一次哪一行的背景颜色变成红色然后点另一行的时候原来点的哪一行变回表格原来的颜色而现在点的这一行变成红色怎么实现
不用鼠标进入和离开的事件只用onclick事件

...全文

769 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

xwbbwx110 2012-05-11

打赏
举报

[Quote=引用 5 楼的回复:]

首先定义个全局 cur 第一次点击tr时，判断 cur是否有值，有的话，就把cur的背景变回蓝色（默认色），紧随改变当前点击tr的背景，接着把当前点击的tr对象赋给cur 第2次点击tr时，cur就有值了（值是第一次点击的tr对象），变回蓝色。。。接着第2次点击的tr红色，再赋值给cur 。。。

这个是三元运算符，也就是说第一次点击的时候 cur是空的没有值那么就会把""赋值给cur 紧接着执行函数然后把当前点击的这个tr赋值给cur 然后第一次点击完成紧接着第二次点击这个时候 cur由于是一个全局的变量里面值是上一次循环也就是上次点击的tr得值就会把cur.style.backgroundColor = 'blue'
赋值给cur 就相当于把上次点击的那个tr的背景颜色改为默认色如此循环下去。。

还是头次一次这样见到用三元运算符真是太神奇了谢谢你了

5楼的做法和我之前一样不过我觉得这样两个循环看起来有点浪费资源不过还是谢谢你们

001007009 2012-05-11

打赏
举报

var cur;
var tr = document.getElementsByTagName("tr");
for(var i=1;i<tr.length;i++){
tr[i].onclick = function(){
cur ? cur.style.backgroundColor = 'blue' : '';
changecolor(this);
cur = this;
}
}

首先定义个全局 cur
第一次点击tr时，判断 cur是否有值，有的话，就把cur的背景变回蓝色（默认色），紧随改变当前点击tr的背景，接着把当前点击的tr对象赋给cur

第2次点击tr时，cur就有值了（值是第一次点击的tr对象），变回蓝色。。。接着第2次点击的tr红色，再赋值给cur

。。。

sone007 2012-05-11

打赏
举报

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

    <title>homework1.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript">

        window.onload = function () {

            var trs = document.getElementById('tb').getElementsByTagName('tr');

            for (var i = 0; i < trs.length; i++) {

                trs[i].onclick = function () {

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

                        trs[j].style.backgroundColor = 'blue';

                    }

                    this.style.backgroundColor = 'red';

                }

            }

        }

    </script>

</head>

<body>

    <table id="tb"border="1" style="background-color: blue">

        <tr>

            <td>

                商品名

            </td>

            <td>

                单价

            </td>

            <td>

                数量

            </td>

        </tr>

        <tr>

            <td>

                蛋糕

            </td>

            <td>

                20

            </td>

            <td>

                3

            </td>

        </tr>

        <tr>

            <td>

                葡萄

            </td>

            <td>

                12

            </td>

            <td>

                2

            </td>

        </tr>

        <tr>

            <td>

                苹果

            </td>

            <td>

                10

            </td>

            <td>

                4

            </td>

        </tr>

        <tr>

            <td>

                芒果

            </td>

            <td>

                19

            </td>

            <td>

                5

            </td>

        </tr>

        <tr>

            <td>

                荔枝

            </td>

            <td>

                8

            </td>

            <td>

                2

            </td>

        </tr>

    </table>

</body>

</html>

xwbbwx110 2012-05-11

打赏
举报

[Quote=引用 1 楼的回复:]

cur ? cur.style.backgroundColor = 'blue' : '';
changecolor(this); cur = this;

这个地方没怎么看懂能详细讲讲吗？我刚接触JS不怎么熟悉

yuwen025 2012-05-11

打赏
举报

用jQuery吧，
$(function(){
$("table tr").click(function(){
var color = $(this).backgroundcolor();
$(this).css("background-color","red").siblings().css("background-color","color");
})
})
或者先定义一个变色的CSS样式 .t { background-color:red;}
$(funciton(){
$("table > tr").click(function(){
$(this).addClass("t").siblings().removeClass("t");
})
})

001007009 2012-05-11

打赏
举报



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

  <title>homework1.html</title>



  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

  <meta http-equiv="description" content="this is my page">

  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    

  <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  <script type="text/javascript">

  window.onload = function(){

  var cur;

  var tr = document.getElementsByTagName("tr");

  for(var i=1;i<tr.length;i++){

  tr[i].onclick = function(){

  cur ? cur.style.backgroundColor = 'blue' : '';

  changecolor(this);

  cur = this;

  }

  }

  }

  

  function changecolor(obj){

  obj.style.backgroundColor= "red";

  }

  </script>



  </head>

   

  <body>

  <table border="1" style="background-color: blue">

  <tr><td>商品名</td><td>单价</td><td>数量</td></tr>

  <tr><td>蛋糕</td><td>20</td><td>3</td></tr>

  <tr><td>葡萄</td><td>12</td><td>2</td></tr>

  <tr><td>苹果</td><td>10</td><td>4</td></tr>

  <tr><td>芒果</td><td>19</td><td>5</td></tr>

  <tr><td>荔枝</td><td>8</td><td>2</td></tr>

  </table>

  </body>

</html>