Как показать строки таблицы на основе параметра URL - PullRequest
Новая
       5

Как показать строки таблицы на основе параметра URL

1 голос
/ 23 апреля 2019

В настоящее время доступ к странице осуществляется по ссылке, например 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 s в 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 голосов
/ 23 апреля 2019

Используйте следующий код: 

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

Вам также необходимо добавить точку (.) С именем класса, которое вы получаете по URL.

Пожалуйста, найдите скрипкуздесь

0 голосов
/ 23 апреля 2019

С большой помощью 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();">
0 голосов
/ 23 апреля 2019

- вам не хватает места .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' })
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...