?
Solved

convert html table into an array

Posted on 2006-07-07
5
Medium Priority
?
878 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 2000 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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
Suggested Courses

752 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