Как вы можете читать атрибуты стиля из ячеек и динамически назначать их обратно?

Question

У меня есть процедура сортировки, которая читает строки данной таблицы, сортирует их и отображает обратно в отсортированном порядке. Он работает нормально, за исключением одной вещи, все форматирование исчезает в процессе.

Соответствующий код:

function newSortTable(myTable)
    {

    var table, rows;
    var x = [[],[]];

    table = document.getElementById(myTable);
    rows = table.rows;
    var numRows = table.rows.length;
    var numCols = table.rows[0].cells.length;

    for (var i = 1; i < numRows; i++)
        {
        var y = [];
        for (j = 0; j < numCols; j++)
            y[j] = table.rows[i].cells[j].innerHTML;

        x[i-1] = y;
        }

    numRows = rows.length;
    for (var k = numRows-1; k > 0; k--)
        table.deleteRow(k);

    x.sort();

    for (var l = 0; l < numRows-1; l++)
        {
        var newRow = table.insertRow(table.rows.length);
        for (var m = 0; m < numCols; m++)
            {
            var myCell = newRow.insertCell(m);
            $(myCell).html(x[l][m]).css({"background-color":"white"});
            }
        }

    } // function newSortTable(myTable)

Я применяю белый фон в коде:

. css ({"background-color": "white"})

, который применяется ко всем ячейкам, но я хотел бы прочитать и сохранить стиль. CSS каждой ячейки и применяя его обратно, когда я снова отображаю форму. Примером такого форматирования может быть:

. css ({"textAlign": "right", "paddingRight": "1em"});

но меняется в основном с типами полей.

Есть идеи? Спасибо!

Answer 1

Итак, я решил свою проблему, оставив таблицу с форматированием, как есть, и не удаляя все строки, кроме заголовка. Это упрощает код и не требует изменения. CSS. Вот исправленный код:

function newSortTable(myTable)
    {
    var x = [[],[]];
    var table = document.getElementById(myTable);
    var rows = table.rows;
    var numRows = table.rows.length;
    var numCols = table.rows[0].cells.length;

    for (var i = 1; i < numRows; i++)
        {
        var y = [];

        // Store the row into the array y
        for (j = 0; j < numCols; j++) y[j] = table.rows[i].cells[j].innerHTML;

        // Add array y to array of rows x
        x[i-1] = y;
        }

    // Sort the array by the values in the first column
    x.sort();

    // Now write back the rows in sorted order
    for (var l = 0; l < numRows-1; l++)
        {
        for (var m = 0; m < numCols; m++)
            {
            var myCell = table.rows[l+1].cells[m];
            $(myCell).html(x[l][m]);
            }
        }

    } // function newSortTable(myTable)

Спасибо за вашу помощь.

Answer 2

Если вы хотите, чтобы команда css() применялась ко всему документу, возьмите jQuery и примените его следующим образом:

$(document).css({"background-color":"white"})

Это то, что вы описываете. Однако, чтобы применить его только к одному элементу, просто выполните $(element).css(...), и только этот элемент изменит его. Итак, это должно работать так, как вы описали, без дальнейших изменений .

Но вы делаете это на ...

var myCell = newRow.insertCell(m);
$(myCell).html(x[l][m]).css({"background-color":"white"});

Каков результат insertCell()? Это строка "*", потому что тогда она будет соответствовать всем элементам? Не зная, что такое myCell, невозможно сказать, почему css() потерпит неудачу.