Question

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

这里是小提琴：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

改变你的方法。在tr级别而不是table级别
点击后，使用removeClass()删除课程。或，您可以在点击时使用toggleClass()来切换课程。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

<强>更新

不幸的是，由于表格是由php脚本生成的，我无法改变方法

在这种情况下，您可以使用css()

tr

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

据我所知也称here，除非你覆盖它，否则你不能删除从父继承的样式。这里是最好的解决方案，找到一个默认样式，当点击行时设置这个样式将删除父样式。

这里的代码，$（this）引用被点击的元素。

$(".tr_table").click(function(){
    $(this).attr('style','background-color: rgba(255,255,255,0.5) !important;color:white !important;');
});

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

2 个答案: