How to get first value of row in table on click?

Question

I have one table with first numeric column:

<table id="toppings"  border="1" cellpadding="2">
   <tr id="id1">
      <td>3</td>
      <td>row12</td>
      <td>row13</td>
  </tr>
  <tr id="id2">
      <td>12</td>
      <td>row22</td>
      <td>row23</td>
  </tr>
  <tr id="id3">
      <td>15</td>
      <td>row32</td>
      <td>row33</td>
  </tr>
  <tr id="id4">
      <td>22</td>
      <td>row42</td>
      <td>row43</td>
 </tr>
 <tr id="id5">
      <td>23</td>
      <td>row52</td>
      <td>row53</td>
 </tr>
 <tr id="id6">
   <td>55</td>
   <td>row62</td>
   <td>row63</td>
 </tr>
</table>

How can I get first value/column of row on clicking row. I found following example doing the same.

http://www.vbforums.com/showthread.php?522104-HTML-table-on-click-event

But I don't want to add event to each row manually as my table is having billions of records. Please help me. How can I get the row value (first column) on clicking row?

You really should describe the user-story or the purpose your after. Which problem are you trying to solve. What you are describing here sounds confusing… — feeela, Nov 10 '14 at 18:19
I hope it doesn't have "billions" of records that might take the browser a really long time to render... — brso05, Nov 10 '14 at 18:23
You could try using jQuery adding on onclick by class. Just give all your rows the same class then add onclick to that class using jquery... — brso05, Nov 10 '14 at 18:27
Add a single click listener to the table, find the clicked row within a loop by checking `.parentElement` from `e.target` and then changing the object to its `parentElement` untill a row is found (jQuery would make this simple, no need for looping). Finally read `innerHTML/textContent` from the first cell on the found row. — Teemu, Nov 10 '14 at 18:28

score 4 · Accepted Answer · answered Nov 10 '14 at 18:29

4

$("#toppings tr").click(function(){
   alert( $(this).children().closest("td").html());
});

fiddle: http://jsfiddle.net/k1ezbcrk/

answered Nov 10 '14 at 18:29

BReal14

1,603
1
12
35

@user15662 I thought you don't want to add a listener to every row? – Teemu Nov 10 '14 at 18:39
He said he didn't want to add code manually for each row, as in targeting by each TR id. – BReal14 Nov 10 '14 at 18:40
Is there any way where i can avoid this? It will be better if it is possible. – Manish Nov 10 '14 at 18:40
alternative syntax for the click callback: `alert($(this).children('td:first').html());` – mwallisch Nov 10 '14 at 18:45
@xe4me No magic, delegation: `$('#toppings').click(function (e) {console.log($(e.target).closest('tr').find('td').html());});` – Teemu Nov 10 '14 at 18:53

score 0 · Answer 2 · answered Nov 10 '14 at 18:34

0

example for one row could be

<tr id="id2">
      <td><a  href="#" onclick="getColumnValue(this)">12</a></td>
      <td>row22</td>
      <td>row23</td>
  </tr>

<script>
 function getColumnValue(elem){
  alert(elem.innerHTML);
 }
</script>

answered Nov 10 '14 at 18:34

userDEV

495
4
18

He said : "But i don't want to add event to each row manually as my table is having billions of records" – Milad Nov 10 '14 at 18:36

score 0 · Answer 3 · answered Nov 10 '14 at 18:34

0

  $("#toppings tr").click(function(){
      alert( $(this).children().first().html());
  });

answered Nov 10 '14 at 18:34

Milad

27,506
11
76
85

Can i convert alert( $(this).children().first().html()); as numerical variable as i need to pass this as parameter. – Manish Nov 11 '14 at 06:25
of course , the value is number , you can assign it to a variable and use it however you want – Milad Nov 11 '14 at 18:26

score 0 · Answer 4 · edited May 23 '17 at 11:58

0

You could use event delegation

var table = document.getElementsByTagName('table')[0];

function getValue(){
  console.log(event.target.parentElement.firstElementChild.innerText);
}

table.addEventListener('click', getValue, false);

edited May 23 '17 at 11:58

Community

1
1

answered Nov 10 '14 at 18:36

skube

5,867
9
53
77

How to get first value of row in table on click?

4 Answers4