javascript - 使用Javascript将标题中的数据标题添加到每个td(二维数组中的for循环)

Question

我有一个 html 表格，我想将标题中的单元格内容作为数据标题添加到响应式 html 表格的每个 td 中。

问题是，当我想设置 tbody 单元格的属性时，我收到了消息:

"array[i] is undefined".

我的 Javascript 代码如下所示:

function myFunction() {
    var head = document.querySelector("table > thead");
    var body = document.querySelector("table > tbody");

    var columncount = body.rows[0].cells.length;
    var headItems = head.rows[0].cells;

    var headRows = head.rows;
    var headCells = [];
    var array = []

    if (headItems.length == columncount) {

        for (var i = 0; i < headRows.length; i++) {
            var columns = [];
            headCells = headRows[i].cells;

            for (var m = 0; m < headCells.length; m++) {
                columns[m] = headCells[m].innerHTML;
            }
            array[i] = columns;
        }
    }
    var bodyRows = body.rows;

    for (j = 0; j < bodyRows.length; j++) {
        var bodyCells = bodyRows[j].cells;
        for (k = 0; k < bodyCells.length; k++) {
            bodyCells[k].setAttribute("data-title", array[i][m]); // NOTE array[i][m] here
        }
    }
}

Answer 1

如果您在项目中使用 jQuery，这可能会有所帮助:

// Add data-title to every <td>
$( "table" ).each( function( index, tableID ) {
    $( tableID ).find( "thead tr th" ).each( function( index ) {
        index += 1;
        $( tableID ).find( "tbody tr td:nth-child(" + index + ")" ).attr( "data-title", $(this).text() );
    });
});

仅适用于具有 <thead> 的表和<tbody>里面有标签。