javaScript 拖动鼠标选择单元格区域

JavaScript017

javaScript 拖动鼠标选择单元格区域,第1张

写得满不错!给你提供一个思路:

document.onmousedown的时候记录一个全局的标记mouseDownFlag = true

document.onmouseup的时候mouseDownFlag = false

单元格上onmouseover事件处理:if(mouseDownFlag) 画为绿色 else 画为白色。

我这个方法,在单元格上按下鼠标不会变色,只有拖动经过才会,所以你自己的代码也需要保留着。把新加的作为补充而不要替换。

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script>

$(function(){

$("table tr").click(function(){

var input = $(this).find("input[type=checkbox]")//获取checkbox

//判断当前checkbox是否为选中状态

if(input.attr("checked")){

input.attr("checked",false)

}else{

input.attr("checked",true)

}

})

})

</script>

<table >  

    <thead>  

        <tr>  

            <td>选择</td>  

            <td>姓名</td>  

            <td>日期</td>  

            <td>金额</td>  

            <td>说明</td>  

        </tr>  

    </thead>  

    <tbody>  

        <tr>  

            <td><input type="checkbox"/></td>  

            <td>张三</td>  

            <td>2009-01-02</td>  

            <td>12.35</td>  

            <td>A股</td>  

        </tr>  

        <tr>  

            <td><input type="checkbox"/></td>  

            <td>张三</td>  

            <td>2009-02-02</td>  

            <td>122.35</td>  

            <td>B股</td>  

        </tr>  

        <tr>  

            <td><input type="checkbox"/></td>  

            <td>张三</td>  

            <td>2009-03-02</td>  

            <td>132.35</td>  

            <td>现金</td>  

        </tr>  

        <tr>  

            <td><input type="checkbox"/></td>  

            <td>张三</td>  

            <td>2009-04-02</td>  

            <td>142.35</td>  

            <td>港股</td>  

        </tr>  

        <tr>  

            <td><input type="checkbox"/></td>  

            <td>张三</td>  

            <td>2009-05-02</td>  

            <td>152.35</td>  

            <td>保险</td>  

        </tr>  

        <tr>  

            <td><input type="checkbox"/></td>  

            <td>张三</td>  

            <td>2009-06-02</td>  

            <td>162.35</td>  

            <td>基金</td>  

        </tr>  

    </tbody>  

</table>