如何将具有行跨度和列跨度的 HTML 表格规范化为 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

如果我对您的问题的理解正确，您是否正在寻找类似的东西？

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 2

在那个维基百科页面上运行它，然后告诉我这是否是你要找的。至少对于列。

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

编辑：我现在看到行更难。 （如果这是你想要的）

Answer 3

您使用哪种服务器端语言？

通常对于这些，您可能只需要一个将数据发布到另一个网站的表单的表单。看看这个 php 例子：https://www.ostraining.com/blog/coding/retrieve-html-form-data-with-php/

如果我没有正确理解您的问题，请纠正我。

Answer 4

这就是我要找的。​​p>

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