Solved

JQeury .ajax help finding table information.

Posted on 2011-09-26
17
201 Views
Last Modified: 2012-05-12
Hello,

I have the attached code and what I'm trying to do is get the table information from table.html excluding the date. I've started with what I think is close but it's not working quite yet.

Thanks,

Brian


TABLE.HTML...

<div id="date">01/02/03</div>
<table width="100" border="1" id="vod_data_table">
  <tr>
    <td>1</td>
    <td>Name 1</td>
    <td>Date</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Name 2</td>
    <td>Date</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Name 3</td>
    <td>Date</td>
  </tr>
</table>


INDEX.HTML...

<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="jquery.js"></script>
	<title>Reading HTML with jQuery</title>
     <script>
     	$(document).ready(function(){
			$.ajax({
				type: "GET",
				url: "table.html",
				dataType: "html",
				success: function(html) {
					$(html).find('#vod_data_table tr').each(function(){
						alert(html);
					});
				}
			});
		});
     </script>
</head>
<body>
	
</body>
</html>

Open in new window

0
Comment
Question by:brihol44
  • 9
  • 8
17 Comments
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
use :
$(html).find('tr').each(function(i,el){
    var txt = "id : " + $("td:eq(0)",el).text() + "\n";
    txt += "name : " + $("td:eq(1)",el).text() + "\n";
    txt += "Date : " + $("td:eq(2)",el).text() + "\n";
    alert(txt);
});

Open in new window

0
 

Author Comment

by:brihol44
Comment Utility
Nice! Almost there...  Is there a way to display all the values? Looks like it's just showing row 3. Also it didn't seem to work but is there a way to pull a specific table 'tr' data just in case another table is added to the page?

This here didn't seem to work

$(html).find('#vod_data_table tr').each(function(i,el){

Thanks!

Brian




<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<title>Reading HTML with jQuery</title>
    <script>
     	$(document).ready(function(){
			$.ajax({
				type: "GET",
				url: "table.html",
				dataType: "html",
				success: function(html) {
					$(html).find('tr').each(function(i,el){
						var txt = "id : " + $("td:eq(0)",el).text() + "\n";
						txt += "name : " + $("td:eq(1)",el).text() + "\n";
						txt += "Date : " + $("td:eq(2)",el).text() + "\n";
						$("#page-wrap").html(txt);
					});
				}
			});
		});
     </script>
</head>
<body>
	<div id="page-wrap">
     	
     </div>
</body>
</html>

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
Comment Utility
for example, you may use : $(html).find('#vod_data_table').find('tr').each(function(i,el){
0
 

Author Comment

by:brihol44
Comment Utility
It's not quite working... Well nothing is coming up.
INDEX.HTML Page...

<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<title>Reading HTML with jQuery</title>
    <script>
     	$(document).ready(function(){
			$.ajax({
				type: "GET",
				url: "table.html",
				dataType: "html",
				success: function(html) {
					$(html).find('#vod_data_table').find('tr').each(function(i,el){
						var txt = "id : " + $("td:eq(0)",el).text() + "\n";
						txt += "name : " + $("td:eq(1)",el).text() + "\n";
						txt += "Date : " + $("td:eq(2)",el).text() + "\n";
						$("#page-wrap").html(txt);
					});
				}
			});
		});
     </script>
</head>
<body>
	<div id="page-wrap">
     	
     </div>
</body>
</html>



TABLE.HTML page....

<div id="date">01/02/03</div>
<table width="100" border="1" id="vod_data_table">
  <tr>
    <td>1</td>
    <td>Name 1</td>
    <td>Date</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Name 2</td>
    <td>Date</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Name 3</td>
    <td>Date</td>
  </tr>
</table>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
if your html is only your table it can't work
if your table is inside a div, it will work


0
 

Author Comment

by:brihol44
Comment Utility
Great! That worked! I'm just getting the last line. Anyway to output all three lines?

Brian
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
>Anyway to output all three lines?

replace :
                        success: function(html) {
                              $(html).find('#vod_data_table').find('tr').each(function(i,el){
                                    var txt = "id : " + $("td:eq(0)",el).text() + "\n";
                                    txt += "name : " + $("td:eq(1)",el).text() + "\n";
                                    txt += "Date : " + $("td:eq(2)",el).text() + "\n";
                                    $("#page-wrap").html(txt);
                              });
                        }
by :
                        success: function(html) {
                                    $(html).find('#vod_data_table').appendTo("#page-wrap");
                        }
0
 

Author Comment

by:brihol44
Comment Utility
Sorry but that doesn't work. I can get the table info and it all displays... but one of my requirements is to only capture certain TD's within the table.

Brian
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 82

Expert Comment

by:leakim971
Comment Utility
>Sorry but that doesn't work

what happen?

please provide a link to your page? else I can't help you.
0
 

Author Comment

by:brihol44
Comment Utility
I don't have a place I can post it live.  I have attached the code below. That should be fine.

My output previously was...

id : 3 name : Name 3 Date : Date

Which is great but it is only 1 line. I need the output to be all three lines...

id : 1 name : Name 1
id : 2 name : Name 2
id : 3 name : Name 3  

Which I know how to exclude the date but haven't yet.

The latest code provided just displays the entire table which I could have done already... by JQuery .load function.

Brian



INDEX.HTML
<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<title>Reading HTML with jQuery</title>
    <script>
     	$(document).ready(function(){
			$.ajax({
				type: "GET",
				url: "table.html",
				dataType: "html",
				success: function(html) {
					$(html).find('#vod_data_table').find('tr').each(function(i,el){
						var txt = "id : " + $("td:eq(0)",el).text() + "\n";
						txt += "name : " + $("td:eq(1)",el).text() + "\n";
						txt += "Date : " + $("td:eq(2)",el).text() + "\n";
						$("#page-wrap").html(txt);
					});
				}
			});
		});
     </script>
</head>
<body>
	<div id="page-wrap">
     	
     </div>
</body>
</html>



TABLE.HTML...
<div>
<div id="date">01/02/03</div>
<table width="100" border="1" id="vod_data_table">
  <tr>
    <td>1</td>
    <td>Name 1</td>
    <td>Date</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Name 2</td>
    <td>Date</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Name 3</td>
    <td>Date</td>
  </tr>
</table>
</div>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
so you want to hide a table column? the date column?
0
 

Author Comment

by:brihol44
Comment Utility
Yes, I understand that I could just eliminate this line here to get that...

txt += "Date : " + $("td:eq(2)",el).text() + "\n";

I just want to pull bits and pieces of the HTML Table and display it on a mini-data feed page without having to re-enter the same data again for this page... Yes, I could tap into a db but I just want to try this.

Make sense?

Brian
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
>Make sense?

yes, why not
0
 

Author Comment

by:brihol44
Comment Utility
Not sure you finished what you were saying...

Brian
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
yes, you know how to get the data from the provided code
now you just need to create your own template to show the data.

$("#page-wrap").html(txt);



0
 

Author Comment

by:brihol44
Comment Utility
Dang... it still outputs to just....

id : 3 name : Name 3 Date : Date

and not...

id : 1 name : Name 1 Date : Date
id : 2 name : Name 2 Date : Date
id : 3 name : Name 3 Date : Date


Like I need...

Brian
0
 

Author Comment

by:brihol44
Comment Utility
I just thought that this part here...

$(html).find('#vod_data_table').find('tr').each(function(i,el){
                                    var txt = "id : " + $("td:eq(0)",el).text() + "\n";
                                    txt += "name : " + $("td:eq(1)",el).text() + "\n";
                                    txt += "Date : " + $("td:eq(2)",el).text() + "\n";
                                    $("#page-wrap").html(txt);
                              });

is looping through and table to add all of the values into the last line...

$("#page-wrap").html(txt);

but it doesn't look like it's possible to get all of the values from this script.

Brian
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Suggested Solutions

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
This video shows how to remove a single email address from the Outlook 2010 Auto Suggestion memory. NOTE: For Outlook 2016 and 2013 perform the exact same steps. Open a new email: Click the New email button in Outlook. Start typing the address: …

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now