Javascript 只显示一行（记录集）而不是多行

Question

我试图显示来自记录集的整个 table 行，但它只显示一条记录。请帮忙。我知道我遗漏了什么，但不确定是什么。

提前致谢


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

现在显示：

 123 abc

想要显示：

123 abc
456 pqr
789 xyz

Answer 1

您写入的每个新行都有 display:none 并且具有相同的 id。

当此 JavaScript 运行时：document.getElementById("testable");，仅找到具有 id 的第一个元素，因此只有第一个元素的 display 更改为 show.

网页中的 ID 必须是唯一的，因此不要为每个新行提供相同的 ID。相反，考虑给它们全部相同的 class（这是允许的）。然后，您的 JavaScript 可以遍历所有这些并像这样更改它们的 display：

// 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";
});

Answer 2

扩展@Scott Marcus 的回答。除了使用类之外，还可以考虑将结果 ID 添加到您的 TR ID 中以使其独一无二。

response.write("<tr id='testable-" & rs(0) & "' style='display:none;'>")

如果您只想一次显示一行并能够单独切换每一行，这将有所帮助，如果您想要一次 show/hide 它们，您可以使用 jquery:

$("tr[id*='testable-']").hide();
$("tr[id*='testable-']").show();

您可以在此处阅读有关隐藏的更多信息：https://www.w3schools.com/jquery/eff_hide.asp

Javascript 只显示一行（记录集）而不是多行

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

html

javascript

recordset

asp-classic