Home Javascript JQuery Read Rows And Columns Of HTML Table

JQuery Read Rows And Columns Of HTML Table

JavaScript script below will read through all rows and display text in cells of columns in a HTML table.

Assume we have a HTML table id=example-table like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<table cellspacing="0" cellpadding="4" id="example-table">
	<tr style="color:White;background-color:#5D7B9D;font-weight:bold;">
		<th scope="col">No</th>
		<th scope="col">Friend Name</th>
		<th scope="col">Job Position</th>
		<th scope="col">Company</th>
		<th scope="col">Website</th>
	</tr>
	<tr style="color:#333333;background-color:#F7F6F3;">
		<td>1</td>
		<td>Hoan Huynh</td>
		<td>Developer</td>
		<td>4 Rapid Development</td>
		<td><a id='website_url_1' href='http://4rapiddev.com'>http://4rapiddev.com</a></td>
	</tr>
	<tr style="color:#284775;background-color:White;">
		<td>2</td>
		<td>Hoan Huynh</td>
		<td>General Director</td>
		<td>OPSgreat</td>
		<td><a id='website_url_2' href='http://opsgreat.com/'>http://opsgreat.com/</a></td>
	</tr>
</table>

The HTML table is like this:

JQuery Read Rows And Columns Of HTML Table - HTML Table Example

JQuery Read Rows And Columns Of HTML Table – HTML Table Example

And we will display the table in another format from its rows and cells text, unordered HTML list for example.

JQuery Read Rows And Cells

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<script type="text/javascript">
$(document).ready(function() {
	var table = document.getElementById('example-table');
 
	var rowLength = table.rows.length;
 
	var FriendList = "<ul>";
 
	var count = 0;
	for(var i=1; i<rowLength; i+=1){
		count ++;
		var row = table.rows[i];
 
		var FriendName = row.cells[1].innerHTML;
		var JobPosition = row.cells[2].innerHTML;
		var Company = row.cells[3].innerHTML;
		var WebsiteURL = document.getElementById('website_url_' + count);
 
		FriendList += "<li>" + FriendName + " is working for <a href='" + WebsiteURL + "'>" + Company + "</a> as " + JobPosition + "</li>";
	}
	FriendList += "</ul>";
	FriendList = "<p>We have: " + count + " friends in the list:</p>" + FriendList;
 
	$("#FriendList").html(FriendList);
});	
</script>

And the result is

JQuery Read Rows And Columns Of HTML Table

JQuery Read Rows And Columns Of HTML Table

Full source code for reading all rows and cells

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo JQuery Read Rows And Columns Of HTML Table</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
 
</head>
<body>
 
<div id="FriendList"></div>
 
<table cellspacing="0" cellpadding="4" id="example-table">
	<tr style="color:White;background-color:#5D7B9D;font-weight:bold;">
		<th scope="col">No</th>
		<th scope="col">Friend Name</th>
		<th scope="col">Job Position</th>
		<th scope="col">Company</th>
		<th scope="col">Website</th>
	</tr>
	<tr style="color:#333333;background-color:#F7F6F3;">
		<td>1</td>
		<td>Hoan Huynh</td>
		<td>Developer</td>
		<td>4 Rapid Development</td>
		<td><a id='website_url_1' href='http://4rapiddev.com'>http://4rapiddev.com</a></td>
	</tr>
	<tr style="color:#284775;background-color:White;">
		<td>2</td>
		<td>Hoan Huynh</td>
		<td>General Director</td>
		<td>OPSgreat</td>
		<td><a id='website_url_2' href='http://opsgreat.com/'>http://opsgreat.com/</a></td>
	</tr>
</table>
 
<script type="text/javascript">
$(document).ready(function() {
	var table = document.getElementById('example-table');
 
	var rowLength = table.rows.length;
 
	var FriendList = "<ul>";
 
	var count = 0;
	for(var i=1; i<rowLength; i+=1){
		count ++;
		var row = table.rows[i];
 
		var FriendName = row.cells[1].innerHTML;
		var JobPosition = row.cells[2].innerHTML;
		var Company = row.cells[3].innerHTML;
		var WebsiteURL = document.getElementById('website_url_' + count);
 
		FriendList += "<li>" + FriendName + " is working for <a href='" + WebsiteURL + "'>" + Company + "</a> as " + JobPosition + "</li>";
	}
	FriendList += "</ul>";
	FriendList = "<p>We have: " + count + " friends in the list:</p>" + FriendList;
 
	$("#FriendList").html(FriendList);
});	
</script>
 
</body>
</html>
Hoan Huynh

Source Code Demo page

Adding Meta Tags For Social SharingTurn On Wifi Hotspot On SamSung Android Devices
You Might Also Like:
Hoan Huynh

Hoan Huynh is the founder and head of 4rapiddev.com. Reach him at hoan@4rapiddev.com

Link3 years ago Javascript, , , , , 173