Senin, 02 Mei 2016

How to get table cell data using JavaScript

How to get table row data in javascript:

  • When we are working with HTML tables we will get a scenario like to get whole table rows data, or table td values , table cell value in JavaScript.
  • For that we need to read the table by using JavaScript.
  • lets see example on get table cell data using java script.
  • Before that lets see how to read the data of table using JavaScript
  • To find number of rows of a table by using table id in JavaScript.



  1. var numberOfrows=document.getElementById("tableData").rows.length;

  • Get number of cells or number of tds inside each tr (table row)

  1. var numberoftds = document.getElementById("tableData").rows[0].cells.length;


  • JavaScript get table row values get table td data

  1. var numberoftds = document.getElementById("tableData").rows[0].cells.item(0).innerHTML;


Example on get table each row data using javascript:



  1. <script type="text/javascript">
  2. function checkFun() {

  3. var n1 = document.getElementById("tableData").rows.length;

  4. var i=0,j=0;
  5. var str="";
  6.  
  7. for(i=0; i<n1;i++){
  8.  
  9. var n2 = document.getElementById("tableData").rows[i].cells.length;
  10.  
  11. for(j=0; j<n2;j++){
  12.  
  13. var x=document.getElementById("tableData").rows[i].cells.item(j).innerHTML;\
  14.  
  15.     str=str+x+":";
  16.  
  17. }
  18. str=str+"#";
  19.    
  20. }
  21.    document.getElementById("tablecontent").innerHTML=str;

  22.    
  23. }
  24. </script>




  1. <body onload="checkFun()">
  2.  
  3. <table id="tableData" border="1">
  4.     <tr>
  5.         <td >37</td>
  6.         <td >46</td>
  7.         <td >3</td>
  8.         <td >64</td>
  9.     </tr>
  10.     <tr>
  11.         <td >10</td>
  12.         <td >4</td>
  13.         <td >7</td>
  14.         <td >21</td>
  15.     </tr>
  16.     
  17. </table>
  18. <p id="tablecontent" ></p>
  19.  </body>


get table cell row td data value javascript

  • Here in this example on page loading we called the JavaScript function
  • For that used body onload="func()" .
  • Practice this example in your System.

Bagikan

Jangan lewatkan

How to get table cell data using JavaScript
4/ 5
Oleh

Subscribe via email

Suka dengan artikel di atas? Tambahkan email Anda untuk berlangganan.