Table data click event issue

Question

How to alert table data where corresponding table head id="0". I have a dynamic table here with many table heads. one table head id is 0. how can i make an alert when clicked on table data corresponding table head.

<table>
<tr>
<th>heading1</th>
<th id="0">heading2</th>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr>
<tr>
<th>heading11</th>
<th id="1">heading12</th>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr>
</table>

$("th#0 td").live('click',function(){
alert("clicked");
});

Which jQuery version you are using? As of jQuery 1.7, the `.live()` method is deprecated. Use `.on()` to attach event handlers. — Kiran, Aug 12 '14 at 07:03
i just want to alert "clicked" when clicked on table data corresponding table head id="0" — kannan D.S, Aug 12 '14 at 07:07
That doesn't look like a valid table structure to me…. You've 4 head ins and 6 columns… and both are in same ``... — T J, Aug 12 '14 at 07:12
don't start ids with a number, http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — nsthethunderbolt, Aug 12 '14 at 07:13

score 1 · Accepted Answer · answered Aug 12 '14 at 07:25

1

$("#0~td").on('click',function(){
alert("clicked");

});

answered Aug 12 '14 at 07:25

selvakumar gopal

85
6

this method is good.And i have one more doubt, if td have a span class ".event" then how to identify the click event of ".event" $("#0~td .event").on('click',function(){ alert("clicked"); is this right? – kannan D.S Aug 12 '14 at 09:50
Yes, You may use this.May i know what is the necessity for this scenario. – selvakumar gopal Aug 12 '14 at 11:11
$("#0~td .event") but this method is not working. can u suggest another way – kannan D.S Aug 12 '14 at 12:28
That method worked for me please check this js fiddle http://jsfiddle.net/d32z80xq/1/ – selvakumar gopal Aug 13 '14 at 06:56

T J · Answer 2 · 2014-08-12T07:43:27.087

Looks like most of the other answers assumes that <th> and <td> containing data are siblings (Well it is, in the given HTML)

The proper table structure should be like

<table>
  <thead>
    <tr>
        <th>heading1</th>
        <th id="0">heading2</th>
        <th>heading11</th>
        <th id="1">heading12</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
        <td>data4</td>
        <td>data5</td>
        <td>data6</td>
    </tr>
    <tr>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
        <td>data4</td>
        <td>data5</td>
        <td>data6</td>
    </tr>
  </tbody>
</table>

You can do this:

var index= $("#0").index();
$("table").on("click", "tr td:nth-child("+(++index)+")", function () {
    alert("click");
})

Demo

score 0 · Answer 3 · answered Aug 12 '14 at 07:27

0

Use the following query I hope it solves your query,

var dataa=$("th#0").siblings('td');
dataa.on('click', function(){
alert("clicked");
});

Here is a DEMO

answered Aug 12 '14 at 07:27

Sam1604

1,459
2
16
26

Table data click event issue

3 Answers3