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.

.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?

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./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?

• javascript
• html-table

• 2 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 Commented Nov 10, 2014 at 18:19
• I hope it doesn't have "billions" of records that might take the browser a really long time to render... – brso05 Commented Nov 10, 2014 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 Commented Nov 10, 2014 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 Commented Nov 10, 2014 at 18:28

4 Answers 4

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

fiddle: http://jsfiddle/k1ezbcrk/

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>

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

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);