javascript - 单击时查找并删除样式属性

Question

当单击相应的标签时，我试图从表中的单个 tr 标签中删除样式属性。一直在尝试一些代码但找不到解决方案。

这里是 fiddle :http://jsfiddle.net/q2nb08t6/12/ jQuery:

$(".tr_table").click(function(){

$(".tg_table").removeAttr('style');
//$(".tg_table").parent().find("tg_table").removeAttr('style');    
//$(".tg_table").parent().removeAttr('style');
//$(".tg_table").each().removeAttr('style');
});

Answer 1

1. 改变你的方法。在 tr 级别而不是 table 级别应用该样式
2. 使用removeClass()单击时删除该类。 或者，您可以使用 toggleClass()单击时切换类。

$(".tr_table").click(function() {
  $(this).toggleClass('tr_table');
});

.tg_table {
  width: 100%
}
.tr_table {
  cursor: pointer;
}
tr.tr_table {
  background-color: rgba(255, 0, 0, 0.5) !important;
  color: white !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<table class="tg_table" border="1" style="">
  <tr class="tr_table">
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr class="tr_table">
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr class="tr_table">
    <td>Neil</td>
    <td>Mark</td>
    <td>30</td>
  </tr>
  <tr class="tr_table">
    <td>Mike</td>
    <td>Ford</td>
    <td>98</td>
  </tr>
</table>

更新

Unfortunately I cannot change the approach as the table is generated by php script

在这种情况下，您可以使用 css() 更改 tr 样式。

$(".tr_table").click(function() {
  $(this).css('background', 'white');
  $(this).css('color', 'black');
});

.tg_table {
  width: 100%
}
.tr_table {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table class="tg_table" border="1" style="background-color: rgba(255,0,0,0.5) !important;color:white !important;">
  <tr class="tr_table">
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr class="tr_table">
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
    <tr class="tr_table">
    <td>Neil</td>
    <td>Mark</td> 
    <td>30</td>
  </tr>
    <tr class="tr_table">
    <td>Mike</td>
    <td>Ford</td> 
    <td>98</td>
  </tr>
</table>