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.

2 Comments

Join the conversation! Your thoughts help the community grow.

Dharmendra Kumar Pandit5y ago
NIce article . Thank you....
- Creator Programmer5y ago
  I wanted to store this html_table_data in my database but not finding any way to store it in table-wise in MySQL DB. Please help if you know how to do it.