如何根据URL参数显示表行

时间:2019-04-23 01:24:56

标签: 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"><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>
...

CSS如下:

table tbody tr{
    text-align: center;
    display: none;
}

tr中还有thead个,默认情况下始终显示它们。)

然后我有一些如下的Javascript代码(不是jQuery的选择):

<script>
    var url = new URL(window.location.href);
    var c = url.searchParams.get("show");
    for (i = 0; i < document.getElementsByClassName(c); i++)
        document.getElementsByClassName(c)[i].style.display='table-row';
</script>

但是我无法显示行。

如何更改页面上的代码以仅显示show参数引用的行?


编辑#1:作为测试,我进行了以下硬编码,但它也不起作用!

<script>
    var url = new URL(window.location.href);
    var c = url.searchParams.get("show");
    var trs = document.getElementsByClassName('pwLen');
    for (i = 0; i < trs.length; i++)
        trs[i].style.display='table-row';
</script>

编辑#2:我将以下两种解决方案合二为一-请参阅https://jsfiddle.net/tea45p2o/。显示的演示输出是我想要的,但是当我保存文件并在浏览器中打开页面时,我看不到该输出。发生了什么事?

3 个答案:

答案 0 :(得分:0)

ŷou无法放置 .length
for (i = 0; i < document.getElementsByClassName(c) .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' })

答案 1 :(得分:0)

使用以下代码:

   for (let el of document.querySelectorAll(c)) el.style.display = 'table-row';

您还需要在类(。)后面附加从URL获得的类名。

Please find the fiddle here

答案 2 :(得分:0)

在BJohn和MrJ的大力帮助下,我提出了以下解决方案:

<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>

然后,我将<body>更改为

<body onLoad="show();">