Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

convert html table into an array

Posted on 2006-07-07
5
Medium Priority
?
967 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
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…

604 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