Как изменить атрибут в ячейке таблицы HTML, если я знаю индекс строки и столбца этой ячейки?

Question

Я ничего не знаю о jQuery, но я опытный программист на C ++ (не уверен, помогает это или мешает). Я нашел код jQuery, который дает мне индекс строки и столбца ячейки в таблице HTML, когда пользователь нажимает на эту ячейку. Используя такие порядковые номера столбца-строки, мне нужно изменить значение атрибута в ранее выбранной ячейке и в только что нажатой ячейке. Индексные номера создаются и сохраняются с этим кодом:

var $trCurrent = 0; // Index of cell selected when page opens 
var $tdCurrent = 0; // i.e., previously selected cell

$(document).ready(function ()
{
    $("td").click(function ()
    {
        // How toclear previously selected cell's attribute here? ('class', 'recent')
        var oTr = $(this).parents("tr");
        $tdCurrent = oTr.children("td").index(this);

     });
    $("tr").click(function ()
    {
        $trCurrent = $(this)[0].rowIndex;
        // How to set new attributes here? ('class', 'current');
        // and continue work using information from currently selected cell

     });
});

Любая помощь или советы будут оценены. Я даже не знаю, так ли я должен получить индекс строки и столбца.

Answer 1

Я бы сделал это немного иначе, если бы понял ваши требования. Если при нажатии на ячейку вам нужно что-то сделать с предыдущей нажатой ячейкой, используйте класс. Итак:

$("td").click(function() {
  $("td.active").removeClass("active");
  $(this).addClass("active");
});

Таким образом, каждый раз, когда вы щелкаете по ячейке, класс active удаляется, а в новую ячейку добавляется. В приведенном выше коде, где я удаляю класс, вы можете делать с ним все что угодно, и это устраняет проблему сохранения и ссылки на номера строк / ячеек.

Если ваша цель просто по-разному стилизовать ячейку, используйте этот же класс в вашем CSS, например:

td.active { background: yellow; }

Когда вы визуализируете страницу, вы можете сделать любую понравившуюся ячейку активной, назначив ей этот класс.

Если вам нужно узнать текущие и предыдущие ячейки, попробуйте это:

$("td").click(function() {
  $("td.active").removeClass("current").addClass("previous");
  $(this).addClass("current");
});

И тогда в любой момент вы можете сделать:

$("td.current")...
$("td.previous")...

Если вам действительно нужно знать номер строки / ячейки, по которой щелкнули, попробуйте:

var rownum;
var cellnum;
$("td").click(function() {
  var row = $(this).closest("tr");
  rownum = $("tr").index(row);
  cellnum = row.children("td").index(this);
});

И если вам нужно сослаться на это в любой момент:

$("tr:eq(" + rownum + ") > td:eq(" + cellnum + ")")...