javascript – How to set class by clicking button in html tables-ThrowExceptions

Exception or error:

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>

How to solve:

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>

###

  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>

###

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

###

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

###

You should not have same attributes multiple time in elements, if you do so attributes after the first will be ignored. 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>

Leave a Reply

Your email address will not be published. Required fields are marked *