Show/Hide selected table tr

Question

I have done one working example.I know numbers of the rows.Basically show 1 and 2 rows if boolean false and hide if it's true.Same click fuction show and hide.

Now I want to do same thing.But now I don't know how many rows,and I'm trying to using this .

 var database = firebase.database();
 database.ref("orders").once('value', function(snapshot) {
     if (snapshot.exists()) {
         var content = '';
         snapshot.forEach(function(data) {
             var val = data.val();
             var degis = val[5].replace("pips", "     ");
             var tss = degis.substring(0, 7);
             content += ' < tr class = "zurna" onclick = "changevisible(this)" >';
             content += ' < td > ' + val[0] + ' < /td>';
             content += ' < td > ' + val[1] + ' < /td>';
             content += ' < td > ' + val[4] + ' < /td>';
             content += ' < td class = "zal" > ' + tss + ' < /td>';
             content += ' < /tr>';
             content += ' < tr id = "subinfo1" class = "altbilgi" onclick = "changevisible(this)" >';
             content += ' < th colspan = "2" class = "altsol" > '  + "Date open:" +' < /th>';
             content += ' < th colspan = "2" class = "datekoy" > ' + val[2] + ' < /th>';
             content += ' < /tr>';
             content += ' < tr id = "subinfo2" class = "altbilgi" onclick = "changevisible(this)" >';
             content += ' < th colspan = "2" class = "altsol" > '  + "Date close:" +' < /th>';
             content += ' < th colspan = "2" class = "datekoy" > ' + val[3] + ' < /th>';
             content += ' < /tr>';
         });
         $('#ex-table').append(content);
     }
     $('.zal').each(function() {
         if (parseInt($(this).text().trim()) < 0) {
             $(this).addClass('redback');
         } else if (parseInt($(this).text().trim()) > 0) {
             $(this).addClass('greenback');
         }
     });
 });

 function changevisible(id) {
     id.getElementById("subinfo1").style.visibility = "collapse";
     id.getElementById("subinfo2").style.visibility = "collapse";
 }
 It 's says "id.getElementById is not a function"

Answer 1

The way I used to show and hide the table row is as below:

1. Add the onclick method to the <tr> .

   <tr onclick="selectedRow(val)"> .

2. Add the disabled attribute and call the method isSelected(val) to the <tr> .

   <tr onclick="selectedRow(val)" disabled="isSelected(val)">

Methods in JavaScript:

var selectedItem;

selectedRow = function(val) {
    selectedItem = val;
}

isSelected = function(val) {
    return val == selectedItem;
}