当前位置: 代码迷 >> Web前端 >> 点击改变本行色彩
  详细解决方案

点击改变本行色彩

热度:20   发布时间:2012-09-19 13:43:54.0
点击改变本行颜色

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

<table width="100%" border="0" cellpadding="3" cellspacing="1" class="report_new">
    <tr class="tdblue">
        <td>模板名称</td>
        <td>模板编码</td>
    </tr>
    <c:forEach var="model" items="${ModelList}" >
      <tr id="tr+${model.modelid}" class="trbai" 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);

?

  相关解决方案