How to set class by clicking button in html tables

user_6724844 0
Viewed 87

I have html tables.and I would like to change it's class by clicking itself.

When I change class,I would like to select each class by clicking button behind them

My attempt is like below. How can I pick up style by clicking on button?

Thanks

    $('.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>
html-table css html jquery javascript
5 Answers

You should not have same attributes multiple time in elements, if you do so attributes after the first will be ignored silently. Though the best approach will be using data-* attribute here. Also, there is a typo in AddClass, should be addClass.

You can try the following way:

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>

user_74613810

Using class attribute more once is not a good practice, we can replace it with data attribute. So on each button click, the data attribute value is taken, then this value is added to the table td click_td..

Now its done on button click, but this can also be replaced with click on 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>

This is the second method, here style is copied to a variable and then applies to the td on clicking 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>

user_61624200 
$('.click_btn').on('click', function(e) {
    e.preventDefault();
    style = $(this).attr('class');  //will return style1/style2
})
user_119038930
  1. You need to save previous style value when set a style to remove it next time.
  2. And there are two class attributes in the button elements.
  3. Consider using innerText instead of class value.

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>

user_38705470 

$(()=>{
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>

user_7184720
Related