Установить видимость включения / выключения кнопки в таблице

Question

Я создаю таблицу с кнопкой в ​​5-м столбце. Сначала кнопка должна быть видна, когда пользователь нажимает на строку таблицы. У меня есть видимость настройки Truble на....

Вот мой код:

for (var i = dataRaw.length; i > 0; i--) {

                var r = dataRaw[i-1];
                var row = table.insertRow(0);
                row.id = r[0];
                for (var x = 0; x < r.length; x++) {

                    if (i === 1) {
                        var headerCell = document.createElement("TH");
                        headerCell.innerHTML = r[x];
                        row.appendChild(headerCell);

                    } else {
                        var cell = row.insertCell(x);

                        if (x === 5) {

                            var btn = document.createElement('input');
                            btn.type = "button";
                            btn.className = "btn";
                            btn.id = r[0].toString();
                            btn.value = "Vis";
                            btn.style.backgroundColor = '#428bca';
                            btn.style.color = 'white';
                            btn.style.visibility = "hidden";
                            cell.appendChild(btn);

                        }
                        else {
                            cell.innerHTML = r[x];
                        }

                    }
                }
            }

У меня есть этот слушатель на столе:

    $(function () {
        $('#errorTable').on('click', 'tr', function () {

            var requestID = this.id;

           document.getElementById(requestID).style.visibility = 'visible';

Кнопка "скрыта" при запуске, но я не могу показать ее снова..... Кто-нибудь?

Answer 1

Предполагая, что каждая строка имеет одну кнопку, или вы хотите скрыть первую кнопку внутри строки \

$('#errorTable').on('click', 'tr', function () {

      //document.getElementById(requestID).style.visibility = 'visible';

       $(this).find('button').first().hide();           
       // or if you set your buttons as INPUTS:
       $(this).find('input[type=button]').first().hide();
}

обратите внимание: этот метод не требует уникального идентификатора строки, по которой щелкнули. Если вы не хотите передать его обратно на сервер.

редактировать

Ваш код, который генерирует кнопку, также может использовать некоторые модификации:

if (x === 5) {
    var btn = $('<input>')
             .attr("type","button")
             .attr("id",r[0].toString())
             .attr("value","Vis")
             .css("background-color","#428bca")
             .css("color","white")
             .css("display","none")       // initially hidden
             .addClass("btn");

    btn.appendTo($(cell));
}

Редактировать 2

Чтобы снова включить видимость кнопки, как вы описали в комментарии, нет необходимости вызывать .first() здесь, так как есть только один элемент с этим идентификатором.

$("#" +requestID+ "btn").show();