在 table 中的按钮上设置可见性 on/off

Question

我正在创建一个 table，其中第 5 列有一个按钮。当用户单击 table 的行时，该按钮应首先可见。我无法设置可见性......

这是我的代码：

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];
                        }

                    }
                }
            }

我在 table 上有这个监听器：

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

            var requestID = this.id;

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

按钮在开始时是 "hidden"，但我无法再次显示它......有人吗？

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()，因为只有一个元素具有该 ID。

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

在 table 中的按钮上设置可见性 on/off

Set visibility on/off on button in table

javascript

visibility

html-table

编辑

编辑 2