Как нормализовать таблицу HTML с помощью rowspan и colspan в матрицу в JavaScript

Question

Для таблицы, такой как this , как преобразовать ее в таблицу, где каждый столбец и каждая строка занимают один слот вместо многих.Я пытаюсь, но довольно трудно обернуть мою голову.

    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) {

    }

Я просто рассматриваю часть tbody.

Answer 1

Это то, что я искал.

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()
}

Answer 2

Если я правильно понял ваш вопрос, вы ищете что-то подобное?

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
  }
}

Answer 3

Какой язык на стороне сервера вы используете?

Обычно для этого у вас может быть просто форма, которая отправляет данные в форму другого веб-сайта.Посмотрите на этот пример php: https://www.ostraining.com/blog/coding/retrieve-html-form-data-with-php/

Исправьте меня, если я не правильно понял ваш вопрос.

Answer 4

Запустите это на этой странице википедии и скажите мне, если это то, что вы ищете.По крайней мере, для столбцов.

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`));
        }
    }
}

Редактировать: теперь я вижу, что строки намного сложнее.(если это то, что вы хотите)