Javascript 如何基于URL参数显示表行_Javascript_Css_Html Table

Javascript 如何基于URL参数显示表行

javascript css

Javascript 如何基于URL参数显示表行,javascript,css,html-table,Javascript,Css,Html Table,目前，该页面是通过链接访问的，例如help.html？show=charInPw 该表按以下方式编写： <table> ... <tbody class="table-body"> <tr class="pwLen"><td colspan="5" class="subheading">Password Length</td></tr> <tr class="pwLen"

目前，该页面是通过链接访问的，例如

help.html？show=charInPw

该表按以下方式编写：

<table>
    ...
    <tbody class="table-body">
        <tr class="pwLen"><td colspan="5" class="subheading">Password Length</td></tr>
        <tr class="pwLen"><td class="first">Minimum length</td><td>Y</td><td>&nbsp;</td><td>Y</td><td>Y</td></tr>
        <tr class="pwLen"><td class="first">Maximum length</td><td>Y</td><td>&nbsp;</td><td>Y</td><td>Y</td></tr>

        <tr class="charInPw"><td colspan="5" class="subheading">Characters in Password</td></tr>
        <tr class="charInPw"><td class="first">Minimum numeric characters</td><td>Y</td><td>&nbsp;</td><td>Y</td><td>Y</td></tr>
        <tr class="charInPw"><td class="first">Minimum alphabetic characters</td><td>Y</td><td>&nbsp;</td><td>Y</td><td>Y</td></tr>
...

（在

thead

中也有

tr

s，它们总是默认显示。）

然后我有如下一些Javascript代码（jQuery不是一个选项）：

编辑#2：我将下面的两个解决方案合并为一个-请参阅。显示的演示输出是我想要的，但是当我保存文件并在浏览器中打开页面时，我无法看到。发生了什么事？

你没能排好。长度

用于（i=0；i
.length；i++）但我认为这样会更具可读性 for(let TR_x of [... document.getElementsByClassName(c) ]) { TR_x.style.display='table-row'; } 但我绝对更喜欢 document.querySelectorAll('.'+c).forEach(trX=>{ trX.style.display='table-row' }) ŷ您缺少放置.length 用于（i=0；i .length；i++）但我认为这样会更具可读性 for(let TR_x of [... document.getElementsByClassName(c) ]) { TR_x.style.display='table-row'; } 但我绝对更喜欢 document.querySelectorAll('.'+c).forEach(trX=>{ trX.style.display='table-row' }) 使用以下代码： for (let el of document.querySelectorAll(c)) el.style.display = 'table-row'; 您还需要使用从URL获得的类名附加点（.）使用以下代码： for (let el of document.querySelectorAll(c)) el.style.display = 'table-row'; 您还需要使用从URL获得的类名附加点（.）在BJohn和MrJ的大力帮助下，我提出了如下解决方案： table tbody tr{ text-align: center; display: none; } <script> function show() { var url = new URL(window.location.href); var c = '.' + url.searchParams.get("show"); for (let el of document.querySelectorAll(c)) el.style.display = 'table-row'; } </script> 函数show（）{ var url=新url（window.location.href）； var c='.'+url.searchParams.get（“show”）；对于（让el of document.queryselectoral（c））el.style.display='table row'； } 然后，我将我的更改为 <body onLoad="show();"> 在BJohn和MrJ的大力帮助下，我提出了如下解决方案： table tbody tr{ text-align: center; display: none; } <script> function show() { var url = new URL(window.location.href); var c = '.' + url.searchParams.get("show"); for (let el of document.querySelectorAll(c)) el.style.display = 'table-row'; } </script> 函数show（）{ var url=新url（window.location.href）； var c='.'+url.searchParams.get（“show”）；对于（让el of document.queryselectoral（c））el.style.display='table row'； } 然后，我将我的更改为 <body onLoad="show();"> 我尝试了你的方法，但没有成功。我在帖子中添加了一个小编辑。不知道为什么那个代码片段不起作用。是的，这就是我想看到的！但是，我无法在我的浏览器中显示它！我试过你的方法，但都不管用。我在帖子中添加了一个小编辑。不知道为什么那个代码片段不起作用。是的，这就是我想看到的！但是，我无法在我的浏览器中显示它！我再次编辑了我的文章，将您的方法合并到一个JSFIDLE中，但不知道为什么我无法获得该输出。@user10931326您是否尝试在类名中添加点（.）。@BJohn是的，请参考我的JSFIDLE。那里的代码就是我的。此时，我不确定是否是由于代码在页面中的位置造成的。@J John先生的代码是错误的，只是因为他使用了block ，而不是表行。我只是想澄清一下，当我把你的两种方法放在JSFIDLE演示中时，它们都能工作。@user10931326很高兴知道这对你有帮助。我再次编辑了我的文章，将你的方法合并到一个JSFIDLE中，但不知道为什么我不能得到输出。@user10931326你试过在类名中添加点（.）吗？@BJohn是的，请参考我的简历。那里的代码就是我的。此时，我不确定是否是由于代码在页面中的位置造成的。@J John先生的代码是错误的，只是因为他使用了block ，而不是表行。只是想澄清一下，当我将这两种方法放在JSFIDLE演示中时，它们都起作用。@user10931326很高兴知道它对您有所帮助。#2是另一个问题，它似乎与您的URL方法有关，也许您应该使用它localStorage@MrJ您在JSFIDLE中看到的代码是我的帮助文件中的源代码。但是，我无法让我的帮助文件显示与JSFIDLE中的演示输出相同的输出。除非你所说的本地存储是指其他东西？我不知道保存页面对你来说是什么动作，然后重新阅读，有一千种方法可以做到这一点，我猜不出你用的是哪一种；但无论如何，这是一个与前一个问题完全不同的问题，如果你想得到答案，你必须用这个问题创建另一个主题，并以比这里更精确的方式进行表述。#2是另一个问题，它似乎是关于你的URL方法，也许你应该用localStorage@MrJ您在JSFIDLE中看到的代码是我的帮助文件中的源代码。但是，我无法让我的帮助文件显示与JSFIDLE中的演示输出相同的输出。除非你所说的本地存储是指其他东西？我不知道保存页面对你来说是什么动作，然后重新阅读，有一千种方法可以做到这一点，我猜不出你用的是哪一种；但无论如何，这是一个与前一个完全不同的问题，如果你想得到答案，你必须用这个问题创建另一个主题，并用比这里更精确的方式来表述它。