jQuery更改默认表标题颜色

Question

默认情况下，我的表格设为boostrap：

我想要做的是从顶部的每个其他标题中删除灰色，因此所有标题都有白色背景。当用户点击标题时，其背景颜色将变为深灰色（如上面的“市场”选择方式）。我当前的jQuery将删除页面刷新时的原始背景颜色（如下所示），但点击任何标题后，它将添加默认背景颜色（如上所示）。我显然可以让选择颜色更改起作用，但它不会覆盖我的样式。

我有一个小提琴，但它没有合适的造型，所以我附加了屏幕截图以及所有代码显示。

jQuery的：

<script>
    var plan;
    $('.nested tr').hide();
    $('.nested tr#essential').show();



    $('.view').click(function() {
            console.log($(this).text());
            $(this).removeAttr('style').addClass('selected').siblings().removeClass("selected");
            plan = $(this).attr("id");
            $('.nested tr').hide();
            $('.nested tr#'+plan).show();       
        });
    </script>

https://jsfiddle.net/uaorqkx7/1/

Answer 1

请检查一下，

var plan;
$('.nested tr').hide();
$('.nested tr#ess').show();

$('.view').click(function() {
  $(this).removeAttr('style').addClass('selected').siblings().removeClass("selected");
  plan = $(this).attr("id");
  $('.nested tr').hide();
  $('.nested tr#' + plan).show();
});

table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

td{
  width:20%;
  height:60px;
  text-align:center;
}
.normal_ td{
  width:20%;
  height:60px;
  text-align:center;
}
.accordion td.selected {
  background-color: #333;
  color:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="toptable">
  <tbody>
    <tr class="accordion">
      <td id="ess" class="view">Ess</td>
      <td style="background: none" id="std" class="view">Std</td>
      <td id="pp" class="view">PP</td>
      <td style="background: none" id="mp" class="view">MP</td>
    </tr>
    <tr class="normal_">
      <td colspan="4">
        <table class="nested" border="1">
          <tbody>

            <tr id="ess">
              <td>Built Tools</td>
              <td>✔</td>
              <td>Unlimited Postings</td>
              <td>✔</td>
            </tr>

            <tr id="std">
              <td>Built Tools</td>
              <td>-</td>
              <td>Unlimited Postings</td>
              <td>✔</td>
            </tr>
            <tr id="pp">
              <td>Built Tools</td>
              <td>✔</td>
              <td>Unlimited Postings</td>
              <td>-</td>
            </tr>

            <tr id="mp">
              <td>Built Tools</td>
              <td>-</td>
              <td>Unlimited Postings</td>
              <td>-</td>
          </tbody>
        </table>
      </td>
      </tr>


  </tbody>
</table>