点中行改变颜色

dxb_828 2009-08-29 03:44:45

能否提供一个选中table中哪行，哪行的颜色就改变，选中另一行，刚才选中行的颜色恢复，并且当鼠标滑过时颜色也是相应变化

...全文

108 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

BeenZ 2009-08-29

打赏
举报

稍微修改



<html>

    <head>

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

        <META http-equiv="Content-Style-Type" content="text/css">

    </head>

    <script language=javascript>

        var TH_HEIGHT="20px";

        var THCOLOR="#ffff99";

        var THBGCOLOR= "#ccecff";

        var NEW_COLOR="#ffffff";

var oldrowover

var oldrow;

        function createEventTable() {

            var newRow,col1,col2,col3;

            var ln = document.getElementById("tb1").rows.length;

            if( ln > 0){

                for(var i=0; i<ln; i++){

                    if(document.getElementById("tb1").rows.length <= 0)break;

                    document.getElementById("tb1").deleteRow(-1);

                }

            }

            for(var colno=0; colno<15; colno++){    

                newRow = document.getElementById("tb1").insertRow(-1);

                newRow.id = 'r'+colno;

                document.getElementById("r"+colno).height = TH_HEIGHT;

                document.getElementById("r"+colno).bgColor = THCOLOR;

                col1=newRow.insertCell(0);

                col2=newRow.insertCell(1);

                col3=newRow.insertCell(2);

                col1.id="col1"+colno

                col2.id = "col2"+colno;

                col3.id = "col3"+colno;

                col1.innerText = "列一"+colno;

                col2.innerText = "列二"+colno;

                col3.innerText = "列三"+colno;

                newRow.onclick=alertMe;

                  newRow.onmouseover=over;   

            }

        }

        function alertMe(){

            this.bgColor=NEW_COLOR;

           if(oldrow!=null&&oldrow!=this){

             	oldrow.bgColor=THCOLOR;

           }

            oldrow=this;

	   

             

        }



	function over(){

           if(this!=oldrow) this.bgColor="red";

           if(oldrowover!=null&&oldrowover!=this&&oldrowover!=oldrow){

             	oldrowover.bgColor=THCOLOR;

           }

            oldrowover=this;         

        }

        window.onload=function(){

            createEventTable();

        }

    </script>

    <body >





        <TABLE  cellSpacing="0" borderColorDark="black" cellPadding="1" 



borderColorLight="black"  border="1">

            <thead>

            <COLGROUP>

                <COL align="center">

                </COL>

                <COL align="center">

                </COL>

                <COL align="center">

                </COL>

                <COL align="center">

                </COL>

            <TR height="22px" bgColor="#ccecff">

                <TH width="36" >列1</TH>

                <TH width="36" >列2</TH>

                <TH width="36" >列3</TH>

            </TR>

        </thead>

        <TBODY id="tb1">

        </TBODY>

    </TABLE>



</body>

</html>

dxb_828 2009-08-29

打赏
举报

是的，谢谢

BeenZ 2009-08-29

打赏
举报

是这样么？



<html>

    <head>

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

        <META http-equiv="Content-Style-Type" content="text/css">

    </head>

    <script language=javascript>

        var TH_HEIGHT="20px";

        var THCOLOR="#ffff99";

        var THBGCOLOR= "#ccecff";

        var NEW_COLOR="#ffffff";

var oldrowover

var oldrow;

        function createEventTable() {

            var newRow,col1,col2,col3;

            var ln = document.getElementById("tb1").rows.length;

            if( ln > 0){

                for(var i=0; i<ln; i++){

                    if(document.getElementById("tb1").rows.length <= 0)break;

                    document.getElementById("tb1").deleteRow(-1);

                }

            }

            for(var colno=0; colno<15; colno++){    

                newRow = document.getElementById("tb1").insertRow(-1);

                newRow.id = 'r'+colno;

                document.getElementById("r"+colno).height = TH_HEIGHT;

                document.getElementById("r"+colno).bgColor = THCOLOR;

                col1=newRow.insertCell(0);

                col2=newRow.insertCell(1);

                col3=newRow.insertCell(2);

                col1.id="col1"+colno

                col2.id = "col2"+colno;

                col3.id = "col3"+colno;

                col1.innerText = "列一"+colno;

                col2.innerText = "列二"+colno;

                col3.innerText = "列三"+colno;

                newRow.onclick=alertMe;

                  newRow.onmouseover=over;   

            }

        }

        function alertMe(){

            this.bgColor=NEW_COLOR;

           if(oldrow!=null&&oldrow!=this){

             	oldrow.bgColor=THCOLOR;

           }

            oldrow=this;

	   

             

        }



function over(){

            this.bgColor="red";

           if(oldrowover!=null&&oldrowover!=this&&oldrowover!=oldrow){

             	oldrowover.bgColor=THCOLOR;

           }

            oldrowover=this;

	   

             

        }

        window.onload=function(){

            createEventTable();

        }

    </script>

    <body >





        <TABLE  cellSpacing="0" borderColorDark="black" cellPadding="1" 



borderColorLight="black"  border="1">

            <thead>

            <COLGROUP>

                <COL align="center">

                </COL>

                <COL align="center">

                </COL>

                <COL align="center">

                </COL>

                <COL align="center">

                </COL>

            <TR height="22px" bgColor="#ccecff">

                <TH width="36" >列1</TH>

                <TH width="36" >列2</TH>

                <TH width="36" >列3</TH>

            </TR>

        </thead>

        <TBODY id="tb1">

        </TBODY>

    </TABLE>



</body>

</html>

dxb_828 2009-08-29

打赏
举报

鼠标滑过时颜色变化，点中行是颜色定在那，点中别的行是刚才点中行的颜色恢复原样，新行颜色又定在那

dxb_828 2009-08-29

打赏
举报

就是既能鼠标滑过时行颜色变为红色，又能点中行时颜色变为红色，并且鼠标滑过时刚才点中的行的颜色还是红色，当点中另一行时，刚才点中行的颜色才变为白色，新点中的行颜色变为红色

BeenZ 2009-08-29

打赏
举报

没明白你的意思，可否把要求说明白点

dxb_828 2009-08-29

打赏
举报

还是不行啊，两者不能并存啊

dxb_828 2009-08-29

打赏
举报

点中颜色能改变，但是在tr中加上鼠标划过不能样式后刚才选中行的颜色自动就没了

BeenZ 2009-08-29

打赏
举报

再来个鼠标移动上去的



<html>

    <head>

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

        <META http-equiv="Content-Style-Type" content="text/css">

    </head>

     <script language=javascript>

            var t, n, c;

            var lastrow;

            function doit(){

                if(event.keyCode==38){

                    if(c!=null) t.rows[c].style.backgroundColor = "#ffffff";

                    if(c==null) c=0;

                    else if(c==0) c=n-1;

                    else c--;

                    t.rows[c].style.backgroundColor = "#cceeff";

                }

                else if(event.keyCode==40){

                    if(c!=null) t.rows[c].style.backgroundColor = "#ffffff";

                    if(c==null) c=0;

                    else if(c==n-1) c=0;

                    else c++;

                    t.rows[c].style.backgroundColor = "#cceeff";

                }

            }

            window.onload=function(){

                t = document.getElementById("tb");

                n = t.rows.length;

                for(var i=0;i<n;i++){

                    t.rows[i].onclick = function(){

                        for(var j=0;j<n;j++) t.rows[j].style.backgroundColor="#ffffff"

                        this.style.backgroundColor="#cceeff";

                    };

			t.rows[i].onmouseover = function(){

                        for(var j=0;j<n;j++) t.rows[j].style.backgroundColor="#ffffff"

                        this.style.backgroundColor="#cceeff";

                    };

                }

	          

                document.onkeyup = doit;

		

            }

        </script>

    <body >

       



        <table id="tb" border=1px gray>

            <tr><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td></tr>

            <tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>

            <tr><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td></tr>

            <tr><td>41</td><td>42</td><td>43</td><td>44</td><td>45</td></tr>

            <tr><td>51</td><td>52</td><td>53</td><td>54</td><td>55</td></tr>

        </table>



    </body>

</html>

BeenZ 2009-08-29

打赏
举报



<html>

    <head>

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

        <META http-equiv="Content-Style-Type" content="text/css">

    </head>

     <script language=javascript>

            var t, n, c;

            var lastrow;

            function doit(){

                if(event.keyCode==38){

                    if(c!=null) t.rows[c].style.backgroundColor = "#ffffff";

                    if(c==null) c=0;

                    else if(c==0) c=n-1;

                    else c--;

                    t.rows[c].style.backgroundColor = "#cceeff";

                }

                else if(event.keyCode==40){

                    if(c!=null) t.rows[c].style.backgroundColor = "#ffffff";

                    if(c==null) c=0;

                    else if(c==n-1) c=0;

                    else c++;

                    t.rows[c].style.backgroundColor = "#cceeff";

                }

            }

            window.onload=function(){

                t = document.getElementById("tb");

                n = t.rows.length;

                for(var i=0;i<n;i++){

                    t.rows[i].onclick = function(){

                        for(var j=0;j<n;j++) t.rows[j].style.backgroundColor="#ffffff"

                        this.style.backgroundColor="#cceeff";

                    };

                }             

                document.onkeyup = doit;

            }

        </script>

    <body >

       



        <table id="tb" border=1px gray>

            <tr><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td></tr>

            <tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>

            <tr><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td></tr>

            <tr><td>41</td><td>42</td><td>43</td><td>44</td><td>45</td></tr>

            <tr><td>51</td><td>52</td><td>53</td><td>54</td><td>55</td></tr>

        </table>



    </body>

</html>