Значение изменения ячейки по клику с несколькими динамическими таблицами

Question

Значение изменения ячейки по клику с несколькими динамическими таблицами

0

$(document).ready($(function change_cell_content() {
            $("td").on("click",
                function(){
                    var $cell_id_ref = $(this).attr('cellID');
                    var $table_id_ref = $(this).parent().parent().parent().attr('tableID');
                    var newValue;

                    var currentValue = document.querySelector('[cellID="' + $cell_id_ref + '"]').innerHTML;
                    alert(currentValue);

                    var changeValue = prompt("Enter a new value. (Current " + currentValue + ")");
                    if ( changeValue!==null ) {
                        newValue = changeValue;
                        document.querySelector('[cellID="' + $cell_id_ref + '"]').innerHTML = newValue;
                    }
                });
        }));

Первая таблица отлично работает, остальные три - нет.

Нажмите на любую ячейку. Предупреждение покажет tableID на который вы нажали. Появится приглашение и попросит ввести новое значение (указав текущее значение в подсказке). В этом проблема, переменная currentValue получает только первую таблицу, хотя я использую cellID($cell_id_ref) и tableID($table_id_ref) чтобы попытаться tableID($table_id_ref) ее в другие таблицы.

Любая помощь или комментарии будут оценены.

user3537489 15 апр. 2014, в 22:05

Источник

Теги:

javascript

jquery

cell

1 ответ

Ещё вопросы

dfsq · Accepted Answer · 2014-04-15T17-15-00.000Z

Вы можете упростить свой код и использовать jQuery вместо querySelectorAll:

$(function change_cell_content() {
    $("td").on("click", function () {

        var cell_id_ref = $(this).attr('cellID');
        var $table = $(this).closest('table');
        var newValue;

        var currentValue = $(this).html();
        alert(currentValue);

        var changeValue = prompt("Enter a new value. (Current " + currentValue + ")");
        if (changeValue !== null) {
            $table.find('[cellID="' + cell_id_ref + '"]').text(changeValue);
        }
    });
});

Вы столкнулись с этой проблемой:

document.querySelector('[cellID="' + $cell_id_ref + '"]').innerHTML = ...

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

Демо: http://jsfiddle.net/waH5S/3/

Точно, как я решил это тоже, но несколько секунд быстрее +1!
Большое спасибо за вашу помощь dfsq! Я пока не могу +1, но, безусловно, когда-нибудь смогу!