We help IT Professionals succeed at work.

reading html tag data

Mike Eghtebas
Mike Eghtebas asked
on
I have a source file with two tables:

<table    with this property -->  summary="System Information"

In this table there are unknown number of <td> tags with pair caption/values like "System Name"/"ABC" etc.

<table  The other table has -->  summary="System Data"

again with unknown number of rows in two columns.

In this question the focus is to handle the first table.

Question: How can I read the data from the first table which has property --> summary="System Information"?

I suppose there needs to be some sort of loop to cycle through all the <td> tags to read their caption/ value pair. Below, you can see the sample html.
<table border="2" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="90%" id="AutoNumber4" summary="System Information">
<tr>
       <td width="28%" height="19"><b><font face="Arial" size="2">DataCaption1 :</font></b></td>
       <td width="34%" height="19"><font size="2">Data1   </font></td>

      <td width="21%" height="19"><b><font face="Arial" size="2">DataCaption2 :</font></b></td>
      <td width="17%" height="19"><font size="2">Data2   </font></td>
</tr>
<tr>
    <td width="28%" height="14"><b><font face="Arial" size="2">DataCaption3 :</font></b></td>
    <td width="34%" height="14"><font size="2">Data3</font></td>

    <td width="21%" height="14"><b><font face="Arial" size="2">DataCaption4 :</font></b></td>
    <td width="17%" height="14"><font size="2">Data4 </font></td>
  </tr>
  <tr>
    <td width="28%" height="1"><b><font face="Arial" size="2">DataCaption5 :</font></b></td>
    <td width="34%" height="1"><font size="2">Data5</font></td>

    <td width="21%" height="1"><b><font face="Arial" size="2">DataCaption6 :</font></b></td>
    <td width="17%" height="1"><font size="2">Data6 </font></td>
  </tr>
  <tr>
    <td width="28%" height="8"><b><font face="Arial" size="2">DataCaption7 :</font></b></td>
    <td width="34%" height="8"><font size="2">Data7</font></td>

    <td width="21%" height="8"><b><font face="Arial" size="2">DataCaption8 :</font></b></td>
    <td width="17%" height="8"><font size="2">Data8</font></td>
  </tr>
  <tr>
    <td width="28%" height="1"><font face="Arial" size="2"><b>DataCaption9 :</b></font></td>
    <td width="34%" height="1"><font size="2">Data9</font></td>

    <td width="23%" height="1"><font face="Arial" size="2"><b>DataCaption10 :</b></font></td>
    <td width="15%" height="1"><font size="2">Data10</font></td>
  </tr>
</table>

Open in new window

Comment
Watch Question

Developer & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
You could use jquery like this
$("table[summary='System Information'] tr td:nth-child(2)").each(function(){
  var x = $(this).text();
  alert(x);
});

Open in new window


here is a sample bin http://jsbin.com/jegifupaha/1/edit?html,js,output
Mike EghtebasDatabase and Application Developer

Author

Commented:
Thank you for the post. This code reads column 1 and 2. It doesn't read data from columns 3 and 4.

How could this be fixed?

Mike
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
You can target which ever td you want.

nth-child(1) = 1st td
nth-child(2) = 2nd td
nth-child(3) = 3rd td
nth-child(4) = 4th td
Mike EghtebasDatabase and Application Developer

Author

Commented:
Thanks.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
Try this
$("table[summary='System Information'] tr").each(function(){
  var col1 = $("td:nth-child(2)",this).text();

   var col2 = $("td:nth-child(4)",this).text();
  
  alert("Col1="+col1+" Col2="+col2);
});

Open in new window

http://jsbin.com/kokomaxoce/1/edit?html,js,output
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
Thanks!