Read Table Header And Row Data Using JQuery

In this blog, you will learn, how to read table header and row data , using JQuery.

This blog will show you, how you can read all the values of HTML table control, using jQuery. Here is HTML table whose row value, we will read, using jQuery. Thus, in this article, I will show two ways to read the rows value. One is to read all the table value and other to read a specific row value. 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<table id="tblArticles" border="1px" cellpadding="2" cellspacing="2">
<caption style="text-align:left;font-weight:bold;">Article List:</caption>
 <thead style="background-color:Lime;">
  <tr>
     <th>Article Code</th>
     <th>Article Title</th>
     <th>Published Date</th>
     <th>No. of Views</th>
  </tr>
 </thead>
 <tbody>
  <tr>
     <td>0001</td>
     <td>JQuery to read HTML Table Contents</td>
     <td>Jan, 2015</td>
     <td>5899</td>
  </tr>
  <tr>
     <td>0002</td>
     <td>JQuery to read HTM Table Cell Value</td>
     <td>Feb, 2015</td>
     <td>4567</td>
  </tr>
  <tr>
     <td>0003</td>
     <td>JQuery to read HTM Table Row Value</td>
     <td>Mar, 2015</td>
     <td>3985</td>
  </tr>
  <tr>
     <td>0004</td>
     <td>JQuery to read HTM Table Column Value</td>
     <td>Apr, 2015</td>
     <td>2354</td>
  </tr>
 </tbody>
</table>

Now, we will read all the row values by jQuery. For this, we will add a button control. On click of button control, we will display the detail.

<input id="btn_read_HTML_Table" type="button" value="Read HTML Table Using JQuery/Javascript" />

Read all the data of the table.

<script type="text/javascript">
        $(document).ready(function () {
            $('#btn_read_HTML_Table').click(function () {
                var html_table_data = "";
                var bRowStarted = true;
                $('#tblArticles tbody>tr').each(function () {
                    $('td', this).each(function () {
                        if (html_table_data.length == 0 || bRowStarted == true) {
                            html_table_data += $(this).text();
                            bRowStarted = false;
                        }
                        else
                            html_table_data += " | " + $(this).text();
                    });
                    html_table_data += "\n";
                    bRowStarted = true;
                });

                alert(html_table_data);
            });
        });
</script>

Now, check the output.

 

 

Now, code to read the header value is given below- 

$('#btn_read_HTML_Table').click(function () {
    var html_table_data = "";
    var bRowStarted = true;
    $('#tblArticles thead>tr').each(function () {
        $('th', this).each(function () {
            if (html_table_data.length == 0 || bRowStarted == true) {
                html_table_data += $(this).text();
                bRowStarted = false;
            }
            else
                html_table_data += " | " + $(this).text();
        });
        html_table_data += "\n";
        bRowStarted = true;
    });

    alert(html_table_data);
});

Now, check the output.