I am creating a table with a button in the 5th column. The button shall first be visible when the user clicks on the row of the table. I am having truble setting visibility on....

Here is my code:

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

                        }



                    }

                }

            }

I have this listener on the table :

    $(function () {

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



            var requestID = this.id;



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

The button is "hidden" at start, but I cannot show it again.....Anyone ?

Assuming each row has a single button, or you want to hide the first button inside the row

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

}

notice: this method does not require the unique id of the row that was clicked. Unless you want to relay it back to the server.

Edit

your code that generates the button also can use some modification:

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

}

Edit 2

To toggle visiblity of the button again, as you described in the comment, there is no need to invoke .first() here, since there is only one element with that ID.

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