这个功能,用JS如何实现呢,多谢大家
日期：2014-05-16 浏览次数：20445 次
这个功能,用JS怎么实现呢,谢谢大家?
有表格MyTable, 每行都有一个checkbox,
1.当点击一行时,这行背景颜色改变,Checkbox选中,当点击另一行时,这一行恢复原来的背景颜色,Checkbox不选中
2.按下shift时,可实现多选,
3.按下CTRL时,可实现拖动多选.
希望大家帮帮我,谢谢.
------解决方案--------------------
实现不难，超出耐心范围。
------解决方案--------------------
1、 <td onmouseover= ' ' onmouseout= ' '> </td>
2、Checkbox本来就是多选控件 所以不需要控制
3、应该很难
------解决方案--------------------
参见
dhtmlxgrid
里面有源码
------解决方案--------------------
<HEAD>
<style>
.normal{BACKGROUND-COLOR : white;}
.selected{BACKGROUND-COLOR : red;}
</style>
<script>
var old;
function select(event) {
var e=event||window.event;
var obj=event.srcElement?event.srcElement:event.target;
if(obj.tagName== "DIV "){
if(old){
document.getElementById( "cb "+old).checked=false;
document.getElementById( "r "+old).className= "normal ";
}
var row=obj.id.substr(1,1);
document.getElementById( "cb "+row).checked=true; //checkbox
document.getElementById( "r "+row).className= "selected "; //change color
old=row;
}
}
</script>
</HEAD>
<BODY>
<TABLE BORDER= "1 " ONCLICK= "select(event) " >
<TR ID= "r1 " CLASS= "normal ">
<TD>
<INPUT ID= "cb1 " TYPE= "checkbox " value= "false " />
</TD>
<TD>
<DIV STYLE= "width:100% " ID= "c11 "> some text </DIV>
</TD>
<TD>
<DIV STYLE= "width:100% " ID= "c12 "> some text </DIV>
</TD>
</TR>
<TR ID= "r2 " CLASS= "normal ">
<TD>
<INPUT ID= "cb2 " TYPE= "checkbox " value= "false " />
</TD>
<TD>
<DIV STYLE= "width:100% " ID= "c21 "> some text 2 </DIV>
</TD>
<TD>
<DIV STYLE= "width:100% " ID= "c22 "> some text 2 </DIV>
</TD>
</TR>
</TABLE>
</BODY>
------解决方案--------------------
第3个你要怎么拖动？
------解决方案--------------------
拖动先把容器的 onselectstart= "return false(); " ondrag= "return false() ";
记录mousedown，再判断mousemove和mouseup，应该可以实现
------解决方案--------------------
实现不难，超出耐心范围。
===
顶
有表格MyTable, 每行都有一个checkbox,
1.当点击一行时,这行背景颜色改变,Checkbox选中,当点击另一行时,这一行恢复原来的背景颜色,Checkbox不选中
2.按下shift时,可实现多选,
3.按下CTRL时,可实现拖动多选.
希望大家帮帮我,谢谢.
------解决方案--------------------
实现不难，超出耐心范围。
------解决方案--------------------
1、 <td onmouseover= ' ' onmouseout= ' '> </td>
2、Checkbox本来就是多选控件 所以不需要控制
3、应该很难
------解决方案--------------------
参见
dhtmlxgrid
里面有源码
------解决方案--------------------
<HEAD>
<style>
.normal{BACKGROUND-COLOR : white;}
.selected{BACKGROUND-COLOR : red;}
</style>
<script>
var old;
function select(event) {
var e=event||window.event;
var obj=event.srcElement?event.srcElement:event.target;
if(obj.tagName== "DIV "){
if(old){
document.getElementById( "cb "+old).checked=false;
document.getElementById( "r "+old).className= "normal ";
}
var row=obj.id.substr(1,1);
document.getElementById( "cb "+row).checked=true; //checkbox
document.getElementById( "r "+row).className= "selected "; //change color
old=row;
}
}
</script>
</HEAD>
<BODY>
<TABLE BORDER= "1 " ONCLICK= "select(event) " >
<TR ID= "r1 " CLASS= "normal ">
<TD>
<INPUT ID= "cb1 " TYPE= "checkbox " value= "false " />
</TD>
<TD>
<DIV STYLE= "width:100% " ID= "c11 "> some text </DIV>
</TD>
<TD>
<DIV STYLE= "width:100% " ID= "c12 "> some text </DIV>
</TD>
</TR>
<TR ID= "r2 " CLASS= "normal ">
<TD>
<INPUT ID= "cb2 " TYPE= "checkbox " value= "false " />
</TD>
<TD>
<DIV STYLE= "width:100% " ID= "c21 "> some text 2 </DIV>
</TD>
<TD>
<DIV STYLE= "width:100% " ID= "c22 "> some text 2 </DIV>
</TD>
</TR>
</TABLE>
</BODY>
------解决方案--------------------
第3个你要怎么拖动？
------解决方案--------------------
拖动先把容器的 onselectstart= "return false(); " ondrag= "return false() ";
记录mousedown，再判断mousemove和mouseup，应该可以实现
------解决方案--------------------
实现不难，超出耐心范围。
===
顶
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
