在表格中设置可见性开/关开按钮

时间:2018-11-22 10:32:01

标签: javascript html-table visibility

我正在第5列中创建带有按钮的表格。当用户单击表的行时,该按钮应首先可见。我在设置可见性时遇到了麻烦。...

这是我的代码:

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';

该按钮在开始时处于“隐藏”状态,但是我无法再次显示它。

1 个答案:

答案 0 :(得分:0)

假设每行都有一个按钮,或者您要隐藏行内的第一个按钮\

$('#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();
}

注意:此方法不需要单击的行的唯一ID。除非您想将其中继回服务器。

编辑

您生成按钮的代码也可以使用一些修改:

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

如注释中所述,要再次切换按钮的可见性,由于这里只有一个具有该ID的元素,因此无需调用.first()

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