views:

41

answers:

2

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"&gt;&lt;/script&gt;
<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>
+1  A: 

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
}
David
Thank you, It works, with some problemIt 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 ?
surendran
This works in IE now, document.write was the problem.
surendran
A: 

maybe try

$(html).wrap('<span>').parent().find('table')
Scott Evernden
Thank you, This works well in Chrome and Firefox. IE just prints 'Table 0'
surendran
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 ?
surendran
Wrapping a table in a span? At least use a div.
David