Javascript displaying only one row(recordset) instead of multiple rows

Question

I am trying to display the whole table of rows which comes from the recordset, but instead it display only one record. Please help. I know i am missing something, but not sure what.

Thanks in advance

    Do Until rs.eof = True
    response.write("<tr id='testable' style='display:none;'>")
    response.write("<td width='10%' align='left'>")
    response.write(rs(0))
    response.write("</td>")
    response.write("<td>")
    response.write(rs(1))
    response.write("</td>")
    response.write("</tr>")
    response.write(vbcrlf)
    rs.MoveNext
    response.write(vbcrlf) 
    Loop

    var x = document.getElementById("testable");
        if (x.style.display == "none") {
            x.style.display = "block";
        } 
        else {
            x.style.display = "none";
        }

Display Now:

 123 abc

Display want:

123 abc
456 pqr
789 xyz

Answer 1

Every new row that you write has it's display:none and has the same id.

When this JavaScript runs: document.getElementById("testable");, only the first element with that id is found and so only the first element has its display altered to show.

ID's must be unique within a web page so don't give each new row the same one. Instead, consider giving them all the same class (which is allowed). Then, your JavaScript could loop through all of them and change their display like this:

// Assume that each <tr> has a class of row

let rows = document.querySelectorAll(".row");

rows.forEach(function(row){
  row.style.display = (row.style.display = "hidden") ? "block" : "hidden";
});