点击改变本行色彩

点击改变本行颜色

 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);