jq 实现点击表格里面一行里面的span标签时添加样式，并移除其他行里面的span的样式

img

$('table span').click(function(){$('table span').removeClass('');$(this).addClass('')})

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script src="https://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
    <style>
    table span {display:inline-block;margin:0px 6px;padding:3px 6px;border-radius:5px;}
    .selected {font-weight:bold;color:white;background:black;}
    </style>
 </head>
 <body>
  <table border="1">
  <tr>
  <td><span>12</span><span>ab</span></td>
  <td><span>12</span><span>ab</span></td>
  <td><span>12</span><span>ab</span></td>
  <td><span>12</span><span>ab</span></td>
  </tr>
  <tr>
  <td><span>12</span><span>ab</span></td>
  <td><span>12</span><span>ab</span></td>
  <td><span>12</span><span>ab</span></td>
  <td><span>12</span><span>ab</span></td>
  </tr>
  <tr>
  <td><span>12</span><span>ab</span></td>
  <td><span>12</span><span>ab</span></td>
  <td><span>12</span><span>ab</span></td>
  <td><span>12</span><span>ab</span></td>
  </tr>
  </table>
  <script>
  $(document).ready(function(){
      $('table span').click(function(){
          // 移除所有span上的selected样式
          //$('table span').removeClass('selected')
          // 移除其他行上span的selected样式，本行的保留
          var that = this
          $('table tr').each(function(){
              if($(this).find('span').index($(that))>=0){
                  return
              }else{
                  $(this).find('span').removeClass('selected')
              }
          })
          $(this).addClass('selected')
      })
  })
  </script>
 </body>
</html>

给span起个类名就可以弄了

$("tr>td").click(function(){
$("tr>td").removeClass("c_h")
$(this).addClass("c_h")
})

在表格渲染的时候给每个span添加一个class，然后给这个绑定点击事件 例如


$('.span').click(function(){        
     $(this).addClass('now').siblings().removeClass('now');
}