Solved

convert html table into an array

Posted on 2006-07-07
5
600 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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

813 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

11 Experts available now in Live!

Get 1:1 Help Now