How do I loop through multiple tables with jQuery in a html file loaded with ajax

Question

I am trying to parse a response data as html format. The data contains multiple tables (not nested tables). I load the html with ajax and trying to loop through the data with jquery.

The problem is No result when I start with 'table' for looping (I have multiple tables and have no ID for the table.) When I use 'tr' It works well in firefox and chrome but not in IE.

I would like to know how I can loop through these tables. Here is the code I was trying.

<html>
<head>
<title>Html table tParser</title>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script language="JavaScript">
 $(document).ready(function(){   
        $.ajax({
                url: "htmltables.html",
                cache: false,
                success: function(html)  
                { 
                 //alert( (html.length));
                 //alert( $(html).find('table').size() );  
                $(html).find('table').each(function(index) 
                { 
                    document.write('<br />'+'<br />'+ 'Table:' + index + '<br />')
                    $(this).find('tr').each(function(index) {
                        document.write('<br />'+'<br />'+ 'Row :' + index + '<br />');                     
                        $(this).find('td').each(function(index) {                                                       
                            document.write($(this).text() + '<br />');
                        });  //td
                    }); //tr    
                });  //table
         } //success
             }); // $.ajax(
  });//$(document).ready(function    

     </script>
   </head>
   <body>
   </body>
</html>

/*------------------------------ */
/* Here is the sample html file I was trying to parse*/

<html>
<head>
<title></title>
</head>

<body>
<table width="200" border="1">
  <tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>2</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>3</td>
    <td>3</td>
  </tr>
</table>
<table width="200" border="1">
  <tr>
    <td>4</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>5</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
    <td>4</td>
    <td>5</td>
  </tr>
</table>

</body>
</html>

yikes, format your code! indent it 4 spaces please!

Patricia
– Patricia

2010-07-23 17:58:54 +00:00
Commented Jul 23, 2010 at 17:58 — Patricia
– Patricia, Commented Jul 23, 2010 at 17:58

David Hellsing · Accepted Answer · 2010-07-23 17:59:24Z

1

You can add the table to a hidden element and then parse it:

var wrapper = $('<div>').hide().appendTo(document.body);
// [...]
success: function(html) {
    wrapper.append(html);
    var table = wrapper.find('table');
    alert(table.length); // should be at least 1

    // parse the HTML here

    wrapper.show(); // will reveal the html
}

answered Jul 23, 2010 at 17:59

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

surendran Over a year ago

Thank you, It works, with some problem It works in Chrome and Firefox. except "wrapper.show()" IE it just printing 'Table0', how can I make this work in IE too ? Why 'table' is not working without appending to DOM, but 'tr' still works ?

Scott Evernden · Accepted Answer · 2010-07-23 18:09:41Z

0

maybe try

$(html).wrap('<span>').parent().find('table')

answered Jul 23, 2010 at 18:09

Scott Evernden

40.1k15 gold badges81 silver badges84 bronze badges

3 Comments

surendran Over a year ago

Thank you, This works well in Chrome and Firefox. IE just prints 'Table 0'

surendran Over a year ago

This works in IE now, document.write was the problem. still one more issue, IE process the table in Reverse order, last table first ? I use, $(html).wrap('<span>').parent().find('table').each(function(index){ is there anything wrong ?

David Hellsing Over a year ago

Wrapping a table in a span? At least use a div.

Collectives™ on Stack Overflow

How do I loop through multiple tables with jQuery in a html file loaded with ajax

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related