Question

HTML

<table cellpadding=10>
  <tr>
    <td id="g1" class="tdback">test 1</td>
    <td>
      <button onclick="clickHighlightTd(g1);">click</button>
    </td>
  </tr>
  <tr>
    <td id="g2" class="tdback">test 2</td>
    <td>
      <button onclick="clickHighlightTd(g2);">click</button>
    </td>
  </tr>
  <tr>
    <td id="g3" class="tdback">test 3</td>
    <td>
      <button onclick="clickHighlightTd(g3);">click</button>
    </td>
  </tr>
  <tr>
    <td id="g4" class="tdback">test 4</td>
    <td>
      <button onclick="clickHighlightTd(g4);">click</button>
    </td>
  </tr>
</table>

CSS

.tdback {
  background-color: #ffffff;
}

.tdhighlight {
  background-color: #999999;
}

JS

function clickHighlightTd(str) {
  $(str).toggleClass('tdhighlight');
}

我想点击一个按钮，同一行中的td应该将类切换为＆＃34; .tdhighlight＆＃34;当点击任何其他按钮时，前一个（或所有其他td）应该得到标准类（＆＃34; .tdback＆＃34;）并且该行中的td应该突出显示。

这是 JSFiddle 。不幸的是，代码在我的网站上运行，但不在 JSFiddle 中。也许我错过了一些东西。

感谢您的帮助！

的 JSFiddle

Answer 1

你快到了：

function clickHighlightTd(str) {
  // remove class from all TD elements
  $("td").removeClass('tdhighlight');
  // your choice: use addClass/toggleClass as you prefer
  $(str).addClass('tdhighlight');
}

更新了小提琴：https://jsfiddle.net/h11pqubz/3/

顺便说一句，TD从不“丢失”类tdback - 另外添加了另一个类tdhighlight（这意味着，TD同时具有两个类），以及{ {1}}已删除，但仍有tdhighlight。

Answer 2

你需要＃在选择器名称之前，你必须从所有td的第一个

中删除该类

function clickHighlightTd(str) {
  $("td").removeClass('tdhighlight');
  $("#"+str).addClass('tdhighlight');
}

另外，删除onclick属性并使用下面的代码

$(document).ready(function(){
    $("button").click(function(){
      $("td").removeClass('tdhighlight');
      $(this).parent().find("td").addClass("tdhighlight");
    }); 
});

Answer 3

如果您不介意我修改了代码，那么我可以让它工作但是在这里：

<强> HTML：

<table cellpadding=10>
  <tr>
    <td class="g1">test 1</td>
    <td>
      <button class="B1">click</button>
    </td>
  </tr>
  <tr>
    <td class="g2">test 2</td>
    <td>
      <button class="B2">click</button>
    </td>
  </tr>
  <tr>
    <td class="g3">test 3</td>
    <td>
      <button class="B3">click</button>
    </td>
  </tr>
  <tr>
    <td class="g4">test 4</td>
    <td>
      <button Class="B4">click</button>
    </td>
  </tr>
</table>

<强> CSS：

.g1{
  background-color: #ffffff;
}
.g2{
  background-color: #ffffff;
}
.g3{
  background-color: #ffffff;
}
.g4{
  background-color: #ffffff;
}
.tdhighlight{
  background-color:#999999;
}

<强> JS / JQUERY：

$(document).ready(function(){
    $('.B1').click(function(){
     $('.g1').toggleClass('tdhighlight');
   $('.g2').removeClass('tdhighlight')
   $('.g3').removeClass('tdhighlight')
   $('.g4').removeClass('tdhighlight')
  });
});
$(document).ready(function(){
    $('.B2').click(function(){
     $('.g2').toggleClass('tdhighlight');
     $('.g1').removeClass('tdhighlight')
   $('.g3').removeClass('tdhighlight')
   $('.g4').removeClass('tdhighlight')
  });
});
$(document).ready(function(){
    $('.B3').click(function(){
     $('.g3').toggleClass('tdhighlight');
   $('.g1').removeClass('tdhighlight')
   $('.g2').removeClass('tdhighlight')
   $('.g4').removeClass('tdhighlight')
  });
});
$(document).ready(function(){
    $('.B4').click(function(){
     $('.g4').toggleClass('tdhighlight');
   $('.g1').removeClass('tdhighlight');
   $('.g2').removeClass('tdhighlight');
   $('.g3').removeClass('tdhighlight');
  });
});

注意：可能还有另一种更简单的方法可以使它工作，但鉴于我的技能和JS / JQUERY的知识，我找到了这种方式使其工作。我希望这有助于：）

Answer 4

解决方案终于来了：https：//jsfiddle.net/h11pqubz/8/

jQuery：toggleClass，多个元素，只有一个突出显示

的 JSFiddle

4 个答案: