实例名称

鼠标选择表格中的多行

实例描述

可通过拖曳的形式实现选择表格的多行。本例通过改变行的背景色，演示选择表格多行的效果。

实例代码

htmlheadtitle 鼠标选择多行-学无忧 language="JavaScript"var curObj= null;var isTrue =false;function setSelectedBgColor//设置选定行的背景色isTrue =true;=='TD' //如果选中的是单元格 curObj=;//获取其父级节点-表格行 ='#ff9999'; //设置背景色 /scriptbodytable border="1" width=220 height=220 onmousemove= "ifisTruesetSelectedBgColor;" onmousedown="setSelectedBgColor;" onmouseup="isTrue =false;"trtd单元格/tdtd单元格/tdtd单元格/td/trtrtd单元格/tdtd单元格/tdtd单元格/td/trtrtd单元格/tdtd单元格/tdtd单元格/td/trtrtd单元格/tdtd单元格/tdtd单元格/td/tr/table/body/html

运行效果

难点剖析

首先判断用户选择的是否是单元格，如果是，则获取单元格的父级标签“tr”。最后通过“background”属性改变行的背景色。

源码下载