How to normalize an HTML table with rowspan and colspan into a matrix in JavaScript

Question

Given a table such as this, how do you convert it to a table where every column and every row takes up one slot instead of many. I am trying but it's pretty difficult to wrap my head around.

    var r = document.querySelectorAll('table tbody tr')
    var w = []
    var matrix = []
    var rows = []
    for (var i = 0, n = r.length; i < n; i++) {
        rows.push([])
    }
    var c, b
    for (var i = 0, n = r.length; i < n; i++) {
        var x = r[i]
        var d = x.querySelectorAll('td')
        for (var j = 0, m = d.length; j < m; j++) {
            var y = d[j]
            while (b--) {
                var column = y
                row.push(column)
            }
            if (c > 0) {
                rows[i].push()
                c--
            }
            b = parseInt(y.getAttribute('colspan') || 1)
            c = parseInt(y.getAttribute('rowspan') || 1)
        }
    }

    function c1(el) {

    }

I'm just considering the tbody part.

You might want to start with a smaller table that does either rowspans or colspans, not both. — symlink, Sep 22 '19 at 00:48
For me the problem is posited in reverse, it is necessary to start from the use of such a type of referencing of an HTML table to define its structure, and not the opposite (as here) — Mister Jojo, Sep 22 '19 at 00:54
otherwise, I do not see the interest of creating a particular structure for this, since there are methods JS to directly access the rows and columns of a Table. — Mister Jojo, Sep 22 '19 at 00:57
How do I iterate through each column and row so every row has the same number of columns then? — Lance, Sep 22 '19 at 00:58
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/rows & https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement — Mister Jojo, Sep 22 '19 at 01:04
I suggest you study the algorithm for [forming a table](https://html.spec.whatwg.org/multipage/tables.html#forming-a-table) from the HTML standard. Once you know what element fills each slot, you can build your table drawing the contents for each slot from the appropriate element. — Alohci, Sep 22 '19 at 02:31
Related, for the more general case: https://stackoverflow.com/questions/49845905/algorithm-for-building-a-representation-of-an-html-table — Frank Vel, Jul 28 '23 at 20:49

Mason · Answer 1 · 2019-09-22T01:24:35.353

0

Run this on that wikipedia page and tell me if that's what you're looking for. At least for columns.

const tds = [];
for (let td of document.querySelectorAll(`td, th`)) {
    tds.push(td);
}

for (let td of tds) {
    //debugger;
    const colspan = td.getAttribute(`colspan`);
    if (colspan) {
        td.setAttribute(`colspan`, 1);
        for (let i = 1; i <= colspan - 1; i++) {
            td.after(document.createElement(`td`));
        }
    }
}

Edit: I see now that rows are much harder. (if this is what you want)

edited Sep 22 '19 at 01:24

answered Sep 22 '19 at 01:19

Mason

738
7
18

and what about using `HTMLTableRowElement.insertCell()` ? => https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement/insertCell – Mister Jojo Sep 22 '19 at 01:39

score 0 · Answer 2 · answered Sep 22 '19 at 01:20

If I understood your question correctly, are you looking for something of this kind?

const myTable = document.querySelector('#my-Table tbody')

var matrix = []

for (let r=0; r<myTable.rows.length; r++ )
{
  matrix[r] = []
  for (let c=0;c<myTable.rows[r].cells.length; c++ )
  {
    matrix[r][c] = myTable.rows[r].cells[c].colSpan
  }
}

score 0 · Answer 3 · answered Sep 22 '19 at 06:59

Which server side language are you using ?

Usually for these, you could just have a form which is posting data to another website's form. Look at this php example : https://www.ostraining.com/blog/coding/retrieve-html-form-data-with-php/

Correct me If I did not understand your question correctly.

score 0 · Answer 4 · answered Sep 26 '19 at 07:19

This is what I was looking for.

print('.wikitable2')

function print(selector) {
 var matrix = parse(selector)
 var table = []
 matrix.forEach(arr => {
  arr = arr.map(x => x.replace(/,/g, ';'))
  table.push(arr.join(','))
 })
 console.log(table.join('\n'))
}

function parse(selector) {
 var rowEls = document.querySelectorAll(selector + ' thead th, ' + selector + ' tbody tr')

 var matrix = []

 for (var i = 0, n = rowEls.length; i < n; i++) {
  var rowEl = rowEls[i]
  var cellEls = rowEl.querySelectorAll('td, th')
  var y = 0
  for (var j = 0, m = cellEls.length; j < m; j++) {
   var cellEl = cellEls[j]
   var rowSpan = parseInt(cellEl.getAttribute('rowspan') || 1)
   var cellSpan = parseInt(cellEl.getAttribute('colspan') || 1)
   var val = parseCell(cellEl, j)
   var rowSpanIterator = rowSpan
   while (rowSpanIterator--) {
    var cellSpanIterator = cellSpan
    while (cellSpanIterator--) {
     var x = i + rowSpanIterator
     matrix[x] = matrix[x] || []
     matrix[x][y + cellSpanIterator] = val
    }
   }
   y += cellSpan
  }
 }

 return matrix
}

function parseCell(el, i) {
 return el.textContent.trim()
}

How to normalize an HTML table with rowspan and colspan into a matrix in JavaScript

4 Answers4