Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1416
  • Last Modified:

convert html table into an array

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
ricardofig
Asked:
ricardofig
1 Solution
 
gops1Commented:
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
 
ricardofigAuthor Commented:
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
 
dakydCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now