Truemag

  • Categories
    • Tips And Tricks
    • Internet
    • PHP
    • Javascript
    • CSharp
    • SQL Server
    • Linux
  • Lastest Videos
  • Our Demos
  • About
  • Contact
  • Home
  • Write With Us
  • Job Request
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>
Oct 29, 2014 Hoan Huynh

Source Code Demo page

Adding Meta Tags For Social SharingTurn On Wifi Hotspot On SamSung Android Devices
You Might Also Like:
  • JQuery Create Textbox With Count Down Limit Characters
  • Count Total Rows For All Tables In MS SQL Server
  • Jquery checkbox checked
  • Get Image Width Height With JQuery And JavaScript
  • Function Remove All HTML Tags In PHP
  • Validate Date With JQuery And Date Object
  • JavaScript Open A New Tab With JQuery
  • JQuery Call Function To Parent And Children Div
  • Auto Load YouTube Video As A Popup With JQuery FancyBox
  • JQuery Show Popup Once A Day
Hoan Huynh

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

Link3 years ago JavascriptgetElementById, HTML, HTML table rows, JQuery, Rows And Columns, unordered HTML list173
0
GooglePlus
0
Facebook
0
Twitter
0
Digg
0
Delicious
0
Stumbleupon
0
Linkedin
0
Pinterest
Most Viewed
PHP Download Image Or File From URL
14,334 views
Notepad Plus Plus Compare Plugin
How To Install Compare Text Plugin In Notepad Plus Plus
10,295 views
Microsoft SQL Server 2008 Attach Remove Log
Delete, Shrink, Eliminate Transaction Log .LDF File
10,279 views
JQuery Allow only numeric characters or only alphabet characters in textbox
8,990 views
Firefox Can Not Connect To Proxy Server
Fix Can Not Connect To Proxy Server In Firefox, Google Chrome And Internet Explorer
5,869 views
4 Rapid Development is a central page that is targeted at newbie and professional programmers, database administrators, system admin, web masters and bloggers.
Recent Posts
  • Magento Fatal error: Unsupported operand types
  • Ionic bower the name contains uppercase letters
  • PHP Magento Get Manufacturer Name And ID From Magento Product ID
  • Know Simple Hacks To Systematize Media Library in WordPress
  • A handy guideline on adding custom menu item in WordPress admin
Categories
  • CSharp (45)
  • Facebook Graph API (19)
  • Google API (7)
  • Internet (87)
  • iPhone XCode (8)
  • Javascript (35)
  • Linux (26)
  • MySQL (16)
  • PHP (84)
  • Problem Issue Error (29)
  • Resources (32)
  • SQL Server (25)
  • Timeline (5)
  • Tips And Tricks (140)
EMAIL SUBSCRIPTION

Sign up for our newsletter to receive the latest news and event postings.

Recommended
  • CDN
  • Hosting
  • Premium Themes
  • VPS
2014 © 4 Rapid Development