鼠标点击当前行背景变色（附有指示图片）

最新推荐文章于 2022-11-17 20:39:02 发布

fireicesion

最新推荐文章于 2022-11-17 20:39:02 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： class table 项目管理 border function 服务器

本文链接：https://blog.youkuaiyun.com/fireicesion/article/details/3796126

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

<mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">.SelectedRow { background-color: #ccccff; }</style>

// JScript 文件 var curTrCss; var lastTr,lastImg; function ChooseThis(tr) { if(tr!=lastTr) { if(lastTr!=null) { if(document.getBoxObjectFor)//FireFox lastTr.setAttribute('class',curTrCss); if(window.ActiveXObject) //IE lastTr.setAttribute('className',curTrCss); if(lastTr.childNodes.length!=0)//在IE下，无刷新翻页后，lastTr.childNodes.length会变成0 lastTr.cells[0].removeChild(lastImg); } var img = document.createElement("img"); img.src = "../Images/selector.gif"; if(document.getBoxObjectFor)//FireFox { curTrCss = tr.getAttribute('class'); tr.setAttribute('class','SelectedRow'); } if(window.ActiveXObject) //IE { curTrCss = tr.getAttribute('className'); tr.setAttribute('className','SelectedRow'); } tr.cells[0].appendChild(img); lastTr = tr; lastImg = img; } }

<table border="1" id="table"> <tr class="Table_TatleStyle"> <td style="width: 20px;"> </td> <td style="width: 40px;"> 操作 </td> <td style="width: 40px;"> 编号</td> <td> 名称</td> <td style="width: 100px;"> 开始时间</td> <td style="width: 40px;"> 进度</td> <td> 描述</td> <td style="width: 100px;"> 状态</td> <td style="width: 20%;"> 优先级</td> </tr> <tr onclick="ChooseThis(this)"> <td class="Table_TatleStyle" style="width: 20px;"> </td> <td> <img src="../Css/HTML_View/View_tables/bianji.gif" mce_src="Css/HTML_View/View_tables/bianji.gif" /> <img src="../Css/HTML_View/View_tables/shanchu11.gif" mce_src="Css/HTML_View/View_tables/shanchu11.gif" /> </td> <td style="text-align: right" mce_style="text-align: right"> 1</td> <td> <a id="00d85280-2da0-43cc-93c7-d38d14d8790e" onclick="ShowProject(this)" href="#" mce_href="#">中铁二局项目管理系统</a></td> <td style="text-align: right" mce_style="text-align: right"> 2008-12-1</td> <td style="text-align: right" mce_style="text-align: right"> 10%</td> <td> 中铁二局电子技术公司需要的项目管理系统，对工期要求很急</td> <td> 执行</td> <td> 非常重要 <img src="../Css/HTML_View/View_tables/feichangzhongyao.gif" mce_src="Css/HTML_View/View_tables/feichangzhongyao.gif" /> </td> </tr> <tr onclick="ChooseThis(this)"> <td class="Table_TatleStyle" style="width: 20px;"> </td> <td> <img src="../Css/HTML_View/View_tables/bianji.gif" mce_src="Css/HTML_View/View_tables/bianji.gif" /> <img src="../Css/HTML_View/View_tables/shanchu11.gif" mce_src="Css/HTML_View/View_tables/shanchu11.gif" /> </td> <td style="text-align: right" mce_style="text-align: right"> 2</td> <td> 北京西码公司试用发布</td> <td style="text-align: right" mce_style="text-align: right"> 2008-12-20</td> <td style="text-align: right" mce_style="text-align: right"> 70%</td> <td> 将进销存系统远程安装到北京的服务器上，让西码公司试用产品</td> <td> 未开始</td> <td> 非常重要 <img src="../Css/HTML_View/View_tables/feichangzhongyao.gif" mce_src="Css/HTML_View/View_tables/feichangzhongyao.gif" /> </td> </tr> <tr onclick="ChooseThis(this)"> <td class="Table_TatleStyle" style="width: 20px;"> </td> <td> <img src="../Css/HTML_View/View_tables/bianji.gif" mce_src="Css/HTML_View/View_tables/bianji.gif" /> <img src="../Css/HTML_View/View_tables/shanchu11.gif" mce_src="Css/HTML_View/View_tables/shanchu11.gif" /> </td> <td style="text-align: right" mce_style="text-align: right"> 3</td> <td> 某团办公自动化系统</td> <td style="text-align: right" mce_style="text-align: right"> 2008-12-31</td> <td style="text-align: right" mce_style="text-align: right"> 0%</td> <td> 超维公司转包给我们的项目，为军队建设办公自动化系统</td> <td> 审批</td> <td> 一般 <img src="../Css/HTML_View/View_tables/yibanzhongyao.gif" mce_src="Css/HTML_View/View_tables/yibanzhongyao.gif" /> </td> </tr> <tr onclick="ChooseThis(this)"> <td class="Table_TatleStyle" style="width: 20px;"> </td> <td> <img src="../Css/HTML_View/View_tables/bianji.gif" mce_src="Css/HTML_View/View_tables/bianji.gif" /> <img src="../Css/HTML_View/View_tables/shanchu11.gif" mce_src="Css/HTML_View/View_tables/shanchu11.gif" /> </td> <td style="text-align: right" mce_style="text-align: right"> 4</td> <td> 新政生产管理升级</td> <td style="text-align: right" mce_style="text-align: right"> 2009-2-1</td> <td style="text-align: right" mce_style="text-align: right"> 0%</td> <td> 新政项目二期工程，运行台帐的建设</td> <td> 草稿</td> <td> 一般 <img src="../Css/HTML_View/View_tables/yibanzhongyao.gif" mce_src="Css/HTML_View/View_tables/yibanzhongyao.gif" /> </td> </tr> </table>