• 欢迎访问本网站,技术教程,资源分享,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入东蓬莱!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏东部蓬莱吧

【js】设置表点击所在行使当前行变色

前端开发 Jokul 11个月前 (07-04) 105次浏览 0个评论 扫描二维码

需求分析:

当页面一个table表单,需要点击一行中的任意位置,使当前行处于被选中状态,获取当前行数据的id值,然后根据id进行一系列的删改查操作。触发效果是当前行背景颜色产生变化。

实现方案:

  • 1.table页面代码
  • <table id="ftpHeadTable" class="table table-primary table-bordered table-striped text-center dataTable no-footer" role="grid">
         <thead>
              <tr role="row">
                  <th style="text-align: center;">主机名称</th>
                  <th style="text-align: center;">主机地址</th>
                  <th style="text-align: center;">是否启用</th>
                  <th style="text-align: center;">是否上传历史数据</th>
                  <shiro:hasPermission name="sys:user:edit">
                      <th style="text-align: center;">操作</th>
                  </shiro:hasPermission>
              </tr>
         </thead>
         <tbody id="contentTbody">
              <c:forEach items="${list}" var="menu">
                  <tr>
                      <td><input id="menuId" value="${menu.id}" type="hidden">${menu.ftpName}</td>
                      <td style="text-align: center">${menu.ip}</td>
                      <td style="text-align: center">
                           <c:if test="${menu.isEnable == '1'}">启用</c:if>
                           <c:if test="${menu.isEnable == '2'}">禁用</c:if>
                      </td>
                      <td style="text-align: center">
                          <c:if test="${menu.uploadOldData == '1'}">允许上传</c:if>
                          <c:if test="${menu.uploadOldData == '2'}">禁止上传</c:if>
                      </td>
                      <shiro:hasPermission name="sys:role:edit">
                          <td style="text-align: center">
                              <a onclick="getMenuInfo('${menu.id}')">修改</a>
                              <a href="${ctx}/delete?id=${menu.id}" onclick="return confirm('确认要删除该角色吗?', this.href)">删除</a>
                          </td>
                     </shiro:hasPermission>
                 </tr>
             </c:forEach>
        </tbody>
    </table>
    
  • 2.CSS代码
  • <style type="text/css">
            .backcolor{
                background-color: #C0C0C0;
            }
    </style>
    
  • 3.JS代码
  • <script type="text/javascript">
             //table选中行变色
            $("#contentTbody tr").click(function(){
                //获取当前行的id存放在id标签的值中
                document.getElementById("id").value = $(this).find("#menuId").val();
    
                $(this).addClass("backcolor").siblings("tr").removeClass("backcolor"); //这行是进行背景色的切换,backcolor 是提前定义好的外部css样式,这里进行添加与删除同类的,即实现了选中改行,其他行颜色去掉。 backcolor 中的属性  要加上 !important ,提高其优先级
                $(this).siblings("tr").find("td").removeClass("backcolor_font");   //下边两行是修改该tr中的字体颜色,该行的作用是删除样式
                $(this).find("td").addClass("backcolor_font"); //该行是添加样式,因为想要实现的效果是点击某行,字体颜色切换,只有一行的字体颜色改变
            });
    </script>
    

    东部蓬莱 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
    转载请注明原文链接:【js】设置表点击所在行使当前行变色
    喜欢 (0)
    [支付宝]
    分享 (0)
    发表我的评论
    取消评论
    表情 贴图 加粗 删除线 居中 斜体 签到

    Hi,您需要填写昵称和邮箱!

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址