Geek Answers Handbook

How to use jQuery, how does a click event handler respond to selected table columns?

jQuery v1.11

Given an HTML table with 6 columns, I want the cells in the table in columns two, three, five, and six to respond to click events. Therefore, if the user clicks on a cell in a column of one or four, the click event handler should not be called.

This prevents the event handler from being called when the user clicks in the first column:

  $('#my-table').on('click', 'tbody td:not(:first-child)', function (e) { alert("I've been clicked on!"); });

And it prevents the event handler from being called when the user clicks in column 4:

  $('#my-table').on('click', 'tbody td:not(:nth-child(4))', function (e) { alert("I've been clicked on!"); });

My question is , how do I change above so that the event handler is not called when a click occurs in a column of one or four.

Jsfiddle

Edit: @micnil answered my specific question and I will find out which template he suggested using. However, @Oleg took the time to point out a better approach. Instead of binding an event handler to each cell, he suggested that I associate an event handler with a table. In my case, it will be better.

Using performance.now() , discussed here , I get the following results setting a binding for jQuery DataTable containing 1000 rows in Chrome:

  Binding the click event to cells took 0.14627581768183972 milliseconds. Binding the click event to the table took 0.04619236347855349 milliseconds.
+4
source share
4 answers

You can just put a coma inside the selector:

  $('#my-table').on('click', 'tbody td:not(:nth-child(4), :first-child)', function (e) { alert("I've been clicked on!"); });
+4
source

I think the best choice in your case is to use the JQuery index () function, which will give you the index of the td pressed, and you can fulfill the condition you want based on the returned index, take a look at the Updated fiddle .

JS:

  $('#my-table').on('click', 'tbody td', function () { if($(this).index() < 4){ //click in td between 1 and 4 alert('td between 1 and 4 clicked'); }else{ //click in another td alert('td between 5 and 6 clicked'); } });

Hope this helps.

+2
source

It is important to understand that code like $('#my-table').on('click', 'tbody td:not(:first-child)', function (e) {...}); creates the first jQuery wrapper with the entire <td> element that matches the 'tbody td:not(:first-child)' selector, and then binds the event handler separately to each of the DOM elements in the jQuery object.

I would recommend you choose a different method. You can make one click binding as a whole <table> . A pop-up event redirects a click on a cell to the parent <tr> , and then <table> . It is important that e.target receives a <td> click.

Thus, the code may be as follows:

 var columnIndexesIgnore = [0, 3]; $('#my-table').on('click', function (e) { var $td = $(e.target).closest("td"); // e.target can be <span> instead of <td> if ($td.length > 0 && $.inArray($td[0].cellIndex, columnIndexesIgnore) < 0) { // cellIndex is 0-based index. We display in alert 1-based column index alert("I've been clicked on column " + ($td[0].cellIndex + 1) + "!"); } });

I used the cellIndex property of the DOM <td> . This is an index based on the 0 column of the <td> element. Therefore, you need to ignore clicks if $td[0].cellIndex is 0 or 3.

See your demo after the change: http://jsfiddle.net/OlegKi/spckrjvf/5/

+1
source

You can check the desired condition by doing this.

 $('td').click(function () { var col = $(this).parent().children().index($(this)); var row = $(this).parent().parent().children().index($(this).parent()); if (col == 3 || col == 0) { alert("I have clicked on column " + col); } else { alert("I have clicked on another column"); } });
0
source

More articles:


All Articles