Manage <td> Class tag on click - javascript

Question

The issue i am facing is that I have a table with 5 <td>. The default color of <td> is red, and it changes its color to blue if user click on it first time, and changes to orange if user click on it second time, and third time it changes its color back to red and it goes on.

What I want is that if any of <td> has blue or orange color, and user click on any other <td> to change it colors, it should alert him "Not allowed, please un-select your previous ", then the user clicks on the selected <td> to change its color back to red and then select any other he wants.

here is my code sample:

$(".OpnSeat").on('click', function(e) {
  if ($(this).attr("class") == "OpnSeat seat_td") {
    $(this).addClass('openM seat_td');
  } else if ($(this).attr("class") == "OpnSeat seat_td openM") {
    $(this).removeClass('openM seat_td');
    $(this).addClass('openF seat_td');
  } else if ($(this).attr("class") == "OpnSeat openF seat_td") {
    $(this).removeClass('openM seat_td openM');
    $(this).removeClass('openF seat_td openM');
    $(this).addClass('OpnSeat seat_td');
  }
});

.seat_td {
  width: 60px;
  margin-right: 10px
}

.OpnSeat {
  color: red;
  border: 2px solid red;
}

.openM {
  color: blue;
  border: 2px solid blue;
}

.openF {
  color: orange;
  border: 2px solid orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="OpnSeat seat_td">
      <p class="intxt">1</p>
    </td>
    <td class="OpnSeat seat_td">
      <p class="intxt">2</p>
    </td>
    <td class="OpnSeat seat_td">
      <p class="intxt">3</p>
    </td>
    <td class="OpnSeat seat_td">
      <p class="intxt">4</p>
    </td>
    <td class="OpnSeat seat_td">
      <p class="intxt">5</p>
    </td>
  </tr>

</table>

AND HERE IS THE WORKING JSFIDDLE

I am not good in English, I hope i conveyed my issue, any idea or hint in this would be highly appreciated.

Philip · Accepted Answer · 2017-05-18 08:00:07Z

2

The easiest way is to use hasClass.

Here is a small example:

$(".OpnSeat").on('click', function (e) {
  if($(".OpnSeat").hasClass('openM') && !$(this).hasClass('openM')) {
    alert('not allowed');
  } else {
    if ($(this).attr("class") == "OpnSeat seat_td") {
      $(this).addClass('openM seat_td');
    } else if ($(this).attr("class") == "OpnSeat seat_td openM") {
      $(this).removeClass('openM seat_td');
      $(this).addClass('openF seat_td');
    } else if ($(this).attr("class") == "OpnSeat openF seat_td") {
      $(this).removeClass('openM seat_td openM');
      $(this).removeClass('openF seat_td openM');
      $(this).addClass('OpnSeat seat_td');
    }
  }
});

.seat_td {
  width:60px;
  margin-right:10px
}
.OpnSeat {
  color:red;
  border:2px solid red; 
}
.openM {
  color:blue;
  border:2px solid blue; 
}
.openF{
  color:orange;
  border:2px solid orange; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
  <td class="OpnSeat seat_td"><p class="intxt">1</p></td>
  <td class="OpnSeat seat_td"><p class="intxt">2</p></td>
  <td class="OpnSeat seat_td"><p class="intxt">3</p></td>
  <td class="OpnSeat seat_td"><p class="intxt">4</p></td>
  <td class="OpnSeat seat_td"><p class="intxt">5</p></td>
</tr>

</table>

answered May 18, 2017 at 8:00

Philip

3,5261 gold badge26 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Philip Over a year ago

Super! This is only an example. I've forgotten to check the orange one, but you can add it too. Now its easy ;)

vijayP · Accepted Answer · 2017-05-18 08:03:57Z

You may refer below code:

https://jsfiddle.net/aLy0qrcv/27/

$(".OpnSeat").on('click', function(e) {
  if ($(this).hasClass("OpnSeat")) {
  //check for ongoing progress
  //check the presence of blue or orange color on DOM elements other than clicked element
    if ($(".openF").not(this).length > 0 || $(".openM").not(this).length > 0) {
      alert("Not allowed, please un-select your previous ");
      return;
    }
  }

  if ($(this).attr("class") == "OpnSeat seat_td") {
    $(this).addClass('openM seat_td');
  } else if ($(this).attr("class") == "OpnSeat seat_td openM") {
    $(this).removeClass('openM seat_td');
    $(this).addClass('openF seat_td');
  } else if ($(this).attr("class") == "OpnSeat openF seat_td") {
    $(this).removeClass('openM seat_td openM');
    $(this).removeClass('openF seat_td openM');
    $(this).addClass('OpnSeat seat_td');
  }

});

Bourbia Brahim · Accepted Answer · 2017-05-18 08:06:23Z

Just add a condition to check if different row than this has orange or blue color hasClass and not:

if($(".OpnSeat").not($(this)).hasClass("openF") || $(".OpnSeat").not($(this)).hasClass("openM") ) { 
      alert("not alowed !");
      return;
    }

below a working example :

$(document).ready(function(){
  $(".OpnSeat").on('click', function (e) {
    if($(".OpnSeat").not($(this)).hasClass("openF") || $(".OpnSeat").not($(this)).hasClass("openM") ) { 
      alert("not alowed !");
      return;
    }
    if ($(this).attr("class") == "OpnSeat seat_td") {
      $(this).addClass('openM seat_td');
    } else if ($(this).attr("class") == "OpnSeat seat_td openM") {
      $(this).removeClass('openM seat_td');
      $(this).addClass('openF seat_td');
    } else if ($(this).attr("class") == "OpnSeat openF seat_td") {
      $(this).removeClass('openM seat_td openM');
      $(this).removeClass('openF seat_td openM');
      $(this).addClass('OpnSeat seat_td');
    }

  });
});

.seat_td {
  width:60px;
  margin-right:10px
}
.OpnSeat {
  color:red;
  border:2px solid red; 
}
.openM {
  color:blue;
  border:2px solid blue; 
}
.openF{
  color:orange;
  border:2px solid orange; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
  <td class="OpnSeat seat_td"><p class="intxt">1</p></td>
  <td class="OpnSeat seat_td"><p class="intxt">2</p></td>
  <td class="OpnSeat seat_td"><p class="intxt">3</p></td>
  <td class="OpnSeat seat_td"><p class="intxt">4</p></td>
  <td class="OpnSeat seat_td"><p class="intxt">5</p></td>
</tr>

</table>

Collectives™ on Stack Overflow

Manage <td> Class tag on click - javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related