Solved

convert html table into an array

Posted on 2006-07-07
5
574 Views
Last Modified: 2008-02-01
Hi,

I need to convert an HTML TABLE into an Array() in javascript, but I need that it supports rowspan & colspan (these two is causing me a lot of problems)

the idea is the follow, having this table:

<table border="1" width="100%" id="table1">
      <tr>
            <td>a1</td>
            <td>a2</td>
            <td>a3</td>
            <td>a4</td>
            <td>a5</td>
      </tr>
      <tr>
            <td rowspan="3">item1</td>
            <td>111</td>
            <td>222</td>
            <td>333</td>
            <td>&nbsp;</td>
      </tr>
      <tr>
            <td>111</td>
            <td>222</td>
            <td>444</td>
            <td>&nbsp;</td>
      </tr>
      <tr>
            <td colspan="3">result</td>
            <td>xxxx</td>
      </tr>
      <tr>
            <td rowspan="4">item2</td>
            <td>333</td>
            <td>444</td>
            <td>555</td>
            <td>&nbsp;</td>
      </tr>
      <tr>
            <td rowspan="2">9999</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
      </tr>
      <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
      </tr>
      <tr>
            <td colspan="3">result</td>
            <td>www</td>
      </tr>
      <tr>
            <td>item3</td>
            <td>333</td>
            <td>667</td>
            <td>77</td>
            <td>88</td>
      </tr>
</table>

to get a valid Array()

where the array will have 2 dimmensions
at the first dimmension the rows, and at the second dimmension the cols. (and at places with the rowspan and colspan place some dummy string)

something like (for the current table)

array[0] = { a1, a2, a3, a4, a5 }
array[1] = { item1, 111, 222, 333, "" }
array[2] = { ROWSPANdummystring, 111, 222, 444, "" }
array[3] = { ROWSPANdummystring, result, colspanDUMMYSTRING, colspanDUMMYSTRING, xxxx}

and so on.

any idea how to handle this?

regards,
Ricardo

0
Comment
Question by:ricardofig
5 Comments
 
LVL 17

Expert Comment

by:gops1
ID: 17058953
I have made your table little short and simpler and here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
      <title>Untitled</title>
      <script language="javascript">

            function convertTableIntoArray(tbl){
                  var tblData="";
                  var tblArr=new Array();
                  tblLength = document.getElementById(tbl).rows.length;
                  for(i=0;i<tblLength;i++){
                        tblData="";
                        for(j=0;j<document.getElementById(tbl).rows[i].cells.length;j++){
                              tblData+=document.getElementById(tbl).rows[i].cells[j].innerHTML+",";
                        }
                        tblData=tblData.substring(0,tblData.length-1)
                        tblArr[i]=tblData.split(",");
                  }
                  alert(tblArr);
            }
      </script>
</head>

<body>
<table border="1" width="100%" id="table1">
     <tr>
          <td>a1</td>
          <td>a2</td>
          <td>a3</td>
          <td>a4</td>
          <td>a5</td>
     </tr>
     <tr>
          <td>item1</td>
          <td>111</td>
          <td>222</td>
          <td>333</td>
          <td>asas</td>
     </tr>
     <tr>
          <td>item2</td>
          <td>333</td>
          <td>444</td>
          <td>555</td>
          <td>aasasa</td>
     </tr>
     <tr>
          <td>item3</td>
          <td>333</td>
          <td>667</td>
          <td>77</td>
          <td>88</td>
     </tr>
</table>
<br><br><input type="button" value="convert" onclick="convertTableIntoArray('table1')">
</body>
</html>
0
 

Author Comment

by:ricardofig
ID: 17059376
I already have something like this, but this will not work with rowSpan or colSpan

I need that it works with rowSpan and colSpan
0
 
LVL 19

Accepted Solution

by:
dakyd earned 500 total points
ID: 17068737
How about the below?  The idea is to create the array up front with the right dimensions, and fill in dummy strings as you find rowpans/colspans.  Before you actually write into the array, you make sure that the spot you want to write to doesn't already have a dummy string in it.  If it does, move over to the next available spot, and write into that spot in the array.  I left some comments in the code, they should help explain how it works.  Hope that helps.

<html>
<head>
<script type="text/javascript">
var rowSpanDummyString = "_rowDummy_";
var colSpanDummyString = "_colDummy_";

function makeArr()
{
  var tbl = document.getElementById("table1");
  var rowLength = tbl.rows[0].length;
  var currRow, currCell;

  /* below for loop calculates true length of a row
     we need a loop because first row can have colspan's in it */
  for (var i = 0, n = tbl.rows[0].length; i < n; i ++)
  {
    currCell = tbl.rows[0].cells[i];
    if (currCell.getAttribute("colspan"))
      rowLength += parseInt(currCell.getAttribute("colspan"));
  }

  /* now initialize our array */
  var arr = new Array(tbl.rows.length);
  for (var i = 0, n = arr.length; i < n; i ++)
    arr[i] = new Array(rowLength);

  /* loop through the HTML table, one row at a time */
  for (var i = 0, n = tbl.rows.length; i < n; i ++)
  {
    currRow = tbl.rows[i];
    var colOffset = 0;

    /* loop through every (HTML) cell in that row */
    for (var j = 0, k = currRow.cells.length; j < k; j ++)
    {
      /* if the current spot in the array already has a dummy string
         we increment the offset, so we don't overwrite the dummy string
         the while loop makes sure we skip over consecutive dummy strings
         if they exist next to each other */
      var p = 0;
      while ((j+p) < arr[i].length &&
             (arr[i][j+p] == rowSpanDummyString || arr[i][j+p] == colSpanDummyString))
      {
        colOffset ++;
        p ++;
      }

      /* once we have correct offset, write contents of current cell to array */
      currCell = currRow.cells[j];
      arr[i][j + colOffset] = currCell.innerHTML;

      /* fill in array with rowspans/colspans if this cell has either attribute set */
      if (currCell.getAttribute("rowspan"))
      {
        for (var p = 1, q = parseInt(currCell.getAttribute("rowspan")); p < q; p ++)
          arr[i+p][j+colOffset] = rowSpanDummyString;
      }
      if (currCell.getAttribute("colspan"))
      {
        for (var p = 1, q = parseInt(currCell.getAttribute("colspan")); p < q; p ++)
        {
          colOffset ++;
          arr[i][j+colOffset] = colSpanDummyString;
        }
      }
    }
  }
}

window.onload = makeArr;
</script>
</head>

<body>
<table border="1" width="100%" id="table1">
     <tr>
          <td>a1</td>
          <td>a2</td>
          <td>a3</td>
          <td>a4</td>
          <td>a5</td>
     </tr>
     <tr>
          <td rowspan="3">item1</td>
          <td>111</td>
          <td>222</td>
          <td>333</td>
          <td>&nbsp;</td>
     </tr>
     <tr>
          <td>111</td>
          <td>222</td>
          <td>444</td>
          <td>&nbsp;</td>
     </tr>
     <tr>
          <td colspan="3">result</td>
          <td>xxxx</td>
     </tr>
     <tr>
          <td rowspan="4">item2</td>
          <td>333</td>
          <td>444</td>
          <td>555</td>
          <td>&nbsp;</td>
     </tr>
     <tr>
          <td rowspan="2">9999</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
     </tr>
     <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
     </tr>
     <tr>
          <td colspan="3">result</td>
          <td>www</td>
     </tr>
     <tr>
          <td>item3</td>
          <td>333</td>
          <td>667</td>
          <td>77</td>
          <td>88</td>
     </tr>
</table>
</body>
</html>
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

895 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

15 Experts available now in Live!

Get 1:1 Help Now