如何在HTML表格中通过点击按钮设置类？

Question

我有一个HTML表格，我想通过点击它自己来更改它的 class。

当我更改类时，我希望可以通过单击其后面的 button 来选择每个类。

我的尝试如下所示。我该如何通过单击 button 来获取 style？

谢谢

    $('.click_btn').on('click', function(e) {
      e.preventDefault();
      style = $(this);   ??
    })

    $('.click_td').on('click', function(e) {
      e.preventDefault();
      $(this).AddClass(style);  ??
    });

    .style1{
        background: rgb(255, 0, 255);
        border-radius: 5px;
    }

    .style2 {
        background: rgb(0, 255, 255);
        border-radius: 5px;

    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table>
      <tr>
        <td class="click_td">color</td>
        <td class="click_td">color 2</td>
      </tr>
    </table>
    <button class="click_btn" class="style1">style1</button>
    <button class="click_btn" class="style2">style2</button>

- Heisenberg

Answer 1

在元素中不应该出现相同的属性，如果您这样做，那么第一个后的属性将被静默忽略。虽然最好的方法是在此处使用data-*属性。此外，AddClass中有一个拼写错误，应为addClass。您可以尝试以下方式：

var style;
$('.click_btn').on('click', function(e) {
  e.preventDefault();
  style = $(this).data('style'); 
})

$('.click_td').on('click', function(e) {
  $(this).removeClass('style1, style2');
  e.preventDefault();
  $(this).addClass(style);  
  style = '';
});

.style1{
  background: rgb(255, 0, 255);
  border-radius: 5px;
  color: red;
}

.style2 {
  background: rgb(0, 255, 255);
  border-radius: 5px;
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="click_td">color</td>
    <td class="click_td">color 2</td>
  </tr>
</table>
<button class="click_btn" data-style="style1">style1</button>
<button class="click_btn" data-style="style2">style2</button>

- Mamun

---

谢谢，我能通过点击按钮选择“样式”吗？我运行了代码片段，但无法复制它。当我点击“样式1”，然后点击“td”，“td”将变成“样式1”。 - Heisenberg

@Heisenberg，我已经更新了答案，请查看:) - Mamun

Answer 2

在IT技术中，使用多个class属性并不是一个好习惯，我们可以用data属性来代替它。所以每次点击按钮时，会获取data属性的值，然后将这个值添加到表格单元格click_td中。

现在已经实现了按钮点击功能，但这也可以用td的点击事件来实现 ;)

 var $ = jQuery;
 $('.click_btn').on('click', function(e) {
      e.preventDefault();
      style = $(this).data().style; 
     $('.click_td').removeClass('style1 style2').addClass(style)
    })

    .style1{
        background: rgb(255, 0, 255);
        border-radius: 5px;
    }

    .style2 {
        background: rgb(0, 255, 255);
        border-radius: 5px;

    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table>
      <tr>
        <td class="click_td">color</td>
        <td class="click_td">color 2</td>
      </tr>
    </table>
    <button class="click_btn" data-style="style1">style1</button>
    <button class="click_btn" data-style="style2">style2</button>

这是第二种方法，这里将样式复制到一个变量中，然后在单击td时应用于td。

var $ = jQuery;
var style ='';
$('.click_btn').on('click', function(e) {
  e.preventDefault();
  style = $(this).data().style;
})

 $('.click_td').on('click', function(){
  $(this).removeClass('style1 style2').addClass(style)
 })

.style1 {
  background: rgb(255, 0, 255);
  border-radius: 5px;
}

.style2 {
  background: rgb(0, 255, 255);
  border-radius: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="click_td">color</td>
    <td class="click_td">color 2</td>
  </tr>
</table>
<button class="click_btn" data-style="style1">style1</button>
<button class="click_btn" data-style="style2">style2</button>

- Akhil Aravind

Answer 3

1. 当设置样式以便下次删除时，您需要保存先前的样式值。
2. 按钮元素中有两个 class 属性。
3. 考虑使用 innerText 而不是 class 值。

let prevStyle = '';
let style = '';

$('.click_btn').on('click', function(e) {
  e.preventDefault();
  prevStyle = style;
  style = $(this).text();
})

$('.click_td').on('click', function(e) {
  e.preventDefault();
  $(this).removeClass(prevStyle);
  $(this).addClass(style);
});

.style1 {
  background: rgb(255, 0, 255);
  border-radius: 5px;
}

.style2 {
  background: rgb(0, 255, 255);
  border-radius: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="click_td">color</td>
    <td class="click_td">color 2</td>
  </tr>
</table>
<button class="click_btn style1">style1</button>
<button class="click_btn style2">style2</button>

- zmag

Answer 4

$(()=>{
var style = $(this).attr('class');   
$('.click_btn').on('click', function(e) {
      e.preventDefault();
      style = $(this).attr('class');   
    })

    $('.click_td').on('click', function(e) {
      e.preventDefault();
      console.log(style);
      $(this).attr('class','');   
      $(this).addClass(style);  
    });
    })

 .style1{
        background: rgb(255, 0, 255);
        border-radius: 5px;
    }

    .style2 {
        background: rgb(0, 255, 255);
        border-radius: 5px;

    }

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table>
      <tr>
        <td class="click_td">color</td>
        <td class="click_td">color 2</td>
      </tr>
    </table>
    <button class="click_btn style1">style1</button>
    <button class="click_btn style2">style2</button>

- mastermind

Answer 5

$('.click_btn').on('click', function(e) {
    e.preventDefault();
    style = $(this).attr('class');  //will return style1/style2
})

- harsh_apache