JQuery to Read HTML Table Row Column Cell Data Records

JQuery or Javascript is an awesome language (though some people don’t want to say language) to improve user experience dramatically. For better user interface we can’t imagine it without JQuery or Javascript. JQuery makes our life more easier. If you are a fan of Javascript, we are requesting you to try JQuery. Why? please start first. Now, we are talking about HTML Table. Table is a major HTML element that we have used a lot. So manipulating table or DOM element using JQuery is a common task in every developer’s life. Here in this article we will guide you “how we can read all Row Column Cell data of an HTML Table using JQuery for each loop”. Also we will discuss a little bit on different JQuery selector’s, we have to use most likely for an HTML Table. So let’s start with example:

Objective/Outcome:
JQuery to Read HTML Table Row Column Cell Data Records

Make an HTML Table First:

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

Add JQuery Reference from Google:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Add an Input Button:

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

Now Add Jquery Function to Read HTML Table Data:

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

Note: The selector “#btn_read_HTML_Table” is used to get the input button. The selector “#tblArticles tbody>tr” is used to get all tr of the tblArticles table beneath tbody section. To read HTML Table Header row data you can use the selector “#tblArticles thead>tr” and to get all th you can use “‘th’, this” selector. Try below example:

JQuery to Read HTML Table Header Row Data:

            $('#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);
            });

Output:
JQuery to Read HTML Table Header Row Column Cell Data

Hope now you can read HTML Table Data using JQuery.

Download HTML Table JQuery Code Example

Posted in Client, Javascript, JQuery

Leave a Reply

Your email address will not be published. Required fields are marked *

AlphaOmega Captcha Classica  –  Enter Security Code
     
 

*