Javascript仅显示一行（记录集），而不显示多行

2024-05-19 • 问答

我试图显示来自记录集的整个行表，但只显示一个记录。请帮忙。我知道我想念一些东西，但不确定是什么。

预先感谢


    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

您写的每个新行都具有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";
});

扩展@Scott Marcus的答案。除了使用类外，请考虑将结果ID添加到您的TR ID中以使其唯一。

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

如果您只想一次显示一行并能够单独切换每一行，并且如果您想一次显示/隐藏所有行，则可以使用jquery做到这一点：

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

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

Javascript仅显示一行（记录集），而不显示多行

lyxxzrb 回答：Javascript仅显示一行（记录集），而不显示多行

大家都在问