I have a html table in which rows and columns are adding dynamically.

Create dynamic row

var row = tableHolder.insertRow(0);
row.id = "row_0";

Create a cell

var cell = row.insertCell(0);
cell.id = "cell_0" 

Now I need to attach a click event on the dynamically created row.

row.addEventListener('click', function(evnt) {
    openPopup();    
}, false);

A popup will open on click on the row.

Now I want when user click on first cell of every row, click event should not be fired and popup will not open.

I have a html table in which rows and columns are adding dynamically.

Create dynamic row

var row = tableHolder.insertRow(0);
row.id = "row_0";

Create a cell

var cell = row.insertCell(0);
cell.id = "cell_0" 

Now I need to attach a click event on the dynamically created row.

row.addEventListener('click', function(evnt) {
    openPopup();    
}, false);

A popup will open on click on the row.

Now I want when user click on first cell of every row, click event should not be fired and popup will not open.

• javascript
• jquery

• you don't mind jQuery solution right – Arun P Johny Commented Jan 16, 2014 at 5:10
• 3 try $(row).on('click', 'td:not(:first-child)', openPopup); – Arun P Johny Commented Jan 16, 2014 at 5:10

3 Answers 3

You can use :gt selector in jquery to add click event on other rows.

Checkout the following link : http://api.jquery./gt-selector/

If you have a table with id="mytable" then you can use jQuery's on() method to listen for events on the table which occur on any cell except the first one in each row. The reason for binding to the table is so that dynamicly created rows will still trigger the event (since the event will bubble up to the table).

// Listen for click event on anything but first cell in each row within #mytable
$('#mytable').on('click', 'td:gt(0)', function() {
    alert('Got click on anything but the first cell');
});

// Dynamically create row for demonstration
$('#mytable').append('<tr><td>Cell 1</td><td>Cell 2</td></tr>');

Here's a fiddle: jsfiddle Click on cell 1 and you will find no event fired, click on the second cell and the alert will appear.

Try this JQuery Solution

$('table tr td:not(:first-child)').click(function () {
        openPopup();
});