CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-table
Brian Crist
Brian Crist

Reputation: 814

How to disable click event in cell table html?

I have table in html, I want to disable click event in any cell of table (th, td, tr) using jQuery or JavaScript. How can I do it? 

<table id="table1" border="1px">
<tr>
  <th>Title1</th>
  <td>Orange</td>
  <th>Title2</th>
  <td>Apple</td>
</tr>
<tr>
  <th>Title3</th>
  <td>Food</td>
  <th>Title4</th>
  <td>Fish</td>
</tr>
</table>

Upvotes: 0

Views: 6428

Answers (3)

Itamar
Itamar

Reputation: 1634

Well, afaik, you haven't registered any click events in the code, so its considered as if you don't have them. Also, what @RoryMcCrossan said also for the mouse to show no events. or cursor:default for normal cursor icon (arrow)

Upvotes: 1

kevguy
kevguy

Reputation: 4438

If by disabling click event you mean disabling the event listeners, then the try the off method:

$(document).ready(function(){
  $('#disable-button').on('click',function(){
    $('#table1').off('click');
  });
  
  $('#table1').on('click',function(){
      alert('click event happened');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1" border="1px">
<tr>
  <th>Title1</th>
  <td>Orange</td>
  <th>Title2</th>
  <td>Apple</td>
</tr>
<tr>
  <th>Title3</th>
  <td>Food</td>
  <th>Title4</th>
  <td>Fish</td>
</tr>
</table>

<button id="disable-button">Disable listener</button>

Otherwise, a very simple way to do would be using pure CSS:

pointer-events:none

But since you want to do it in jquery instead:

If you're using jQuery versions 1.4.3+:

$('selector').click(false);

If not:

$('selector').click(function(){ return false; });

Upvotes: 1

muhammad hasnain
muhammad hasnain

Reputation: 501

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  

  $(document).ready(function(){
        $("#table1").click(function(e){
          if (e.target !== this)
            return;
            alert('clicked');
        });
    });
</script>
</head>
<body>
    <table id="table1" border="1px">
    <tr>
      <th>Title1</th>
      <td>Orange</td>
      <th>Title2</th>
      <td>Apple</td>
    </tr>
    <tr>
      <th>Title3</th>
      <td>Food</td>
      <th>Title4</th>
      <td>Fish</td>
    </tr>
    </table>
</body>
</html>

Upvotes: 0

Related Questions