读书人

点击改变本行色彩

发布时间: 2012-09-19 13:43:54 作者: rapoo

点击改变本行颜色

?web中通常有这个需求,点击一行,然后这行颜色会改变,以示区别,假如jsp代码如下:

<table width="100%" border="0" cellpadding="3" cellspacing="1" items="${ModelList}" >      <tr id="tr+${model.modelid}" style="cursor:hand" onclick="changeColor(this);">         <td onclick="search('${model.modelid}');" >${model.modelname}</td>         <td onclick="search('${model.modelid}');">${model.modelcode}</td>      </tr>    </c:forEach>    </table>

?

?

js中可以这样写:

<script type="text/javascript">    function changeColor(obj){                 var trs=document.getElementsByTagName("tr");      for(var i=1;i<trs.length;i++){        if(trs[i].id == obj.id){          obj.style.backgroundColor='#b5d8f5';        }else{          trs[i].style.backgroundColor ='';        }      }          }  </script>

?通过获取tr列的id,也可以用于默认点击对应列的search(id);

点击改变本行色彩

?

读书人网 >Web前端

热点推荐