50求一JS

why_java 2009-08-24 04:52:27

用上下键可以选择一个<tr><最好在选种的<tr>经、背景加点灰色效果！
在选择的<tr>上双击可发生双击事件
那个写出＜５０分相送>

...全文

127 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

why_java 2009-08-25

打赏
举报

兄弟们这分我怎么分啊！！

chen_ya_ping 2009-08-24

打赏
举报

不好意思上面的代码不全，从新发一下：



  $(document).ready(function() {

            var count = $("#table1 tr").length;

            var position = 0;

            $("#table1 tr:first-child").css("backgroundColor", "red");

            $("#table1 tr:first-child").dblclick(function() {

                alert($(this).html());

            });

            $(document.body).bind("keyup", function() {

                var key = event.keyCode;

                if (key == 38) {

                    position--;

                    if (position < count - 1) {

                        $("#table1 tr").eq(position).css("backgroundColor", "red");

                        $("#table1 tr").eq(position).dblclick(function() {

                            alert($(this).html());

                        });

                        $("#table1 tr").eq(position).next().css("backgroundColor", "white");

                        $("#table1 tr").eq(position).next().unbind("dblclick");

                    }

                }

                if (key == 40) {

                    position++;

                    if (position >= 0) {

                        $("#table1 tr").eq(position).css("backgroundColor", "red");

                        $("#table1 tr").eq(position).dblclick(function() {

                            alert($(this).html());

                        });

                        $("#table1 tr").eq(position).prev().css("backgroundColor", "white");

                        $("#table1 tr").eq(position).prev().unbind("dblclick");

                    }

                }

            });

        });

chen_ya_ping 2009-08-24

打赏
举报



   $(document).ready(function() {

            var count = $("#table1 tr").length;

            var position = 0;

            $("#table1 tr:first-child").css("backgroundColor", "red");

            $(document.body).bind("keyup", function() {

                var key = event.keyCode;

                if (key == 38) {

                    position--;

                    if (position < count - 1) {

                        $("#table1 tr").eq(position).css("backgroundColor", "red");

                        $("#table1 tr").eq(position).next().css("backgroundColor", "white");

                    }

                }

                if (key == 40) {

                    position++;

                    if (position >= 0) {

                        $("#table1 tr").eq(position).css("backgroundColor", "red");

                        $("#table1 tr").eq(position).prev().css("backgroundColor", "white");

                    }

                }

            });

        });



<table id="table1"> 

          <tr>

              <td>Dog</td>

          </tr>

          <tr>

              <td>Mat</td>

          </tr>

            <tr>

              <td>Tigger</td>

          </tr>

       </table>

ohmydog1 2009-08-24

打赏
举报

写个jquery的
test.htm



<style type="text/css">

.tr_selected{background-color:#999999;}

</style>

<script type="text/javascript" src="jquery-1.3.2.js"></script>

<script >

//jquery-1.3.2.js 可以到jquery官网下载

function trClick(obj){

	$('tr.tr_selected').removeClass("tr_selected");

	$(obj).addClass("tr_selected");

}

function trDblClick(obj){

	var name=$(obj).children(".name").text();

	var age=$(obj).children(".age").text();

	alert("name:"+name+"\n age:"+age);

}

function trKeyDown(){

if ( event.keyCode=='38' )//上

	$(".tr_selected").prev("tr:last").click();

if ( event.keyCode=='40' )//下

	$(".tr_selected").next("tr:first").click();

if ( event.keyCode=='13' )//回车

	$(".tr_selected").dblclick();

}

</script>

<table onKeyDown="trKeyDown();">

<thead><tr id="cat"><td style="width:200px;">name</td><td style="width:200px;">age</td></tr></thead>

<tbody>

	<tr id="tr1" class="tr_selected" onclick="trClick(this);"  onDblClick="trDblClick(this);">

<td class="name">aaa</td><td class="age">11</td></tr>

	<tr id="tr2" onclick="trClick(this);"  onDblClick="trDblClick(this);">

		<td class="name">bbb</td><td class="age">22</td></tr>

	<tr id="tr3" onclick="trClick(this);"  onDblClick="trDblClick(this);">

		<td class="name">ccc</td><td class="age">33</td></tr>

	<tr id="tr4" onclick="trClick(this);"  onDblClick="trDblClick(this);">

		<td class="name">ddd</td><td class="age">44</td></tr>

</tbody>

</table>

BeenZ 2009-08-24

打赏
举报

和 hookee 代码相似,稍微不同,LZ可以试试

<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].ondblclick = function(){
for(var j=0;j<n;j++) t.rows[j].style.backgroundColor="#ffffff"
this.style.backgroundColor="#cceeff";
alert(this.parentNode.innerHTML)
};
}
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>

浴火_凤凰 2009-08-24

打赏
举报

厉害，佩服啊！！！

hookee 2009-08-24

打赏
举报



<script>

var t, n, c;

function doit(){

  	if(event.keyCode==38){

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

  		if(c==null) c=0;

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

  		else c--;

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

  	}

  	else if(event.keyCode==40){

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

  		if(c==null) c=0;

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

  		else c++;

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

  	}

}

function dbclk(){

	var obj = event.srcElement;

    if(obj.tagName == "TD") alert(obj.parentNode.innerHTML);

}

window.onload=function(){

	t = document.getElementById("tb");

	n = t.rows.length;

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

	   t.rows[i].ondblclick = dbclk;

	}

	document.onkeyup = doit;

}

</script>



<table id="tb">

	<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>