HTML + JS: поиск строки не работает, если строка поступает из массива - PullRequest
Новая
       115

HTML + JS: поиск строки не работает, если строка поступает из массива

0 голосов
/ 07 августа 2020

Я пытаюсь сравнить список в таблице со списком имен в строке, используя метод includes (). Однако я застрял и не понимаю, почему.

Когда я жестко кодирую строку в метод includes (), он работает отлично. Когда строка поступает из массива, который включает строку, она ее не находит, и я действительно не могу понять ее ...

Этот код не работает: 

    <!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
</head>

<body>

    <h1>Teilnehmerliste zum Abhaken</h1><br>
    <button onclick="myFunction()">Try it</button>


    <div class="linklist">

        <form method=post name="form_selectpdarticipants">
            <div id="check_part">
                <table class="normal">
                    <tr>
                        <th></th>
                        <th>Name</th>
                        <th>Beginn</th>
                        <th>Ende</th>
                        <th>Bemerkung</th>
                        <th>Status</th>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="check_897203" value=1></td>
                        <td>
                            <nobr>1. Duck, Donald</nobr>
                        </td>
                        <td><input type="text" size=16 name="begin_897203" value="16.06.2020 16:30"></td>
                        <td><input type="text" size=16 name="end_897203" value="16.06.2020 18:00"></td>
                        <td><input type="text" size=50 name="comment_897203" value="" </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="check_897204" value=1></td>
                        <td>
                            <nobr>2. Duck, Daisy</nobr>
                        </td>
                        <td><input type="text" size=16 name="begin_897204" value="16.06.2020 16:30"></td>
                        <td><input type="text" size=16 name="end_897204" value="16.06.2020 18:00"></td>
                        <td><input type="text" size=50 name="comment_897204" value="" </td>

                    </tr>
                    <tr>
                        <td><input type="checkbox" name="check_897205" value=1></td>
                        <td>
                            <nobr>3. Batman</nobr>
                        </td>
                        <td><input type="text" size=16 name="begin_897205" value="16.06.2020 16:30"></td>
                        <td><input type="text" size=16 name="end_897205" value="16.06.2020 18:00"></td>
                        <td><input type="text" size=50 name="comment_897205" value="" </td>

                    </tr>
                    <tr>
                        <td><input type="checkbox" name="check_897206" value=1></td>
                        <td>
                            <nobr>4. Superman</nobr>
                        </td>
                        <td><input type="text" size=16 name="begin_897206" value="16.06.2020 16:30"></td>
                        <td><input type="text" size=16 name="end_897206" value="16.06.2020 18:00"></td>
                        <td><input type="text" size=50 name="comment_897206" value="" </td>

                    </tr>
                    <tr>
                        <td><input type="checkbox" name="check_897207" value=1></td>
                        <td>
                            <nobr>5. Spiderman</nobr>
                        </td>
                        <td><input type="text" size=16 name="begin_897207" value="16.06.2020 16:30"></td>
                        <td><input type="text" size=16 name="end_897207" value="16.06.2020 18:00"></td>
                        <td><input type="text" size=50 name="comment_897207" value="" </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="check_897208" value=1></td>
                        <td>
                            <nobr>6. Wonderwoman</nobr>
                        </td>
                        <td><input type="text" size=16 name="begin_897208" value="16.06.2020 16:30"></td>
                        <td><input type="text" size=16 name="end_897208" value="16.06.2020 18:00"></td>
                        <td><input type="text" size=50 name="comment_897208" value="" </td>

                    </tr>
                    <tr>
                        <td><input type="checkbox" name="check_897209" value=1></td>
                        <td>
                            <nobr>7. Thor</nobr>
                        </td>
                        <td><input type="text" size=16 name="begin_897209" value="16.06.2020 16:30"></td>
                        <td><input type="text" size=16 name="end_897209" value="16.06.2020 18:00"></td>
                        <td><input type="text" size=50 name="comment_897209" value="" </td>

                    </tr>
                    <tr>
                        <td><input type="checkbox" name="check_897210" value=1></td>
                        <td>
                            <nobr>8. Mouse, Mickey</nobr>
                        </td>
                        <td><input type="text" size=16 name="begin_897210" value="16.06.2020 16:30"></td>
                        <td><input type="text" size=16 name="end_897210" value="16.06.2020 18:00"></td>
                        <td><input type="text" size=50 name="comment_897210" value="" </td>

                    </tr>


                </table>
            </div>


            <script>
                function myFunction() {

                    var tnList = ["Duck, Donald", "Duck, Daisy", "Batman", "Superman", "Spiderman"];

                    var masterDiv = document.getElementById("check_part");
                    var rows = masterDiv.getElementsByTagName("table")[0].rows;

                    for (var i = 0; i < rows.length; i++) {
                        console.log(tnList[i]);

                        var content = String(rows[i].innerText).includes(tnList[i]);
                        console.log(i);



                        if (content) {
                            var checkbox = rows[i].getElementsByTagName("input")[0].checked = true;

                        }
                        // if ()
                        //     var last = rows[rows.length - 1];
                        // var cell = last.cells[0];
                        // var value = cell.innerHTML;
                        // console.log(value);

                    }
                };
            </script>

</body>

</html>

Когда я меняю только метод includes () на использование жестко запрограммированной строки, он внезапно срабатывает: 

    <!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
</head>

<body>

    <h1>Teilnehmerliste zum Abhaken</h1><br>
    <button onclick="myFunction()">Try it</button>


    <div class="linklist">

        <form method=post name="form_selectpdarticipants">
            <div id="check_part">
                <table class="normal">
                    <tr>
                        <th></th>
                        <th>Name</th>
                        <th>Beginn</th>
                        <th>Ende</th>
                        <th>Bemerkung</th>
                        <th>Status</th>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="check_897203" value=1></td>
                        <td>
                            <nobr>1. Duck, Donald</nobr>
                        </td>
                        <td><input type="text" size=16 name="begin_897203" value="16.06.2020 16:30"></td>
                        <td><input type="text" size=16 name="end_897203" value="16.06.2020 18:00"></td>
                        <td><input type="text" size=50 name="comment_897203" value="" </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="check_897204" value=1></td>
                        <td>
                            <nobr>2. Duck, Daisy</nobr>
                        </td>
                        <td><input type="text" size=16 name="begin_897204" value="16.06.2020 16:30"></td>
                        <td><input type="text" size=16 name="end_897204" value="16.06.2020 18:00"></td>
                        <td><input type="text" size=50 name="comment_897204" value="" </td>

                    </tr>
                    <tr>
                        <td><input type="checkbox" name="check_897205" value=1></td>
                        <td>
                            <nobr>3. Batman</nobr>
                        </td>
                        <td><input type="text" size=16 name="begin_897205" value="16.06.2020 16:30"></td>
                        <td><input type="text" size=16 name="end_897205" value="16.06.2020 18:00"></td>
                        <td><input type="text" size=50 name="comment_897205" value="" </td>

                    </tr>
                    <tr>
                        <td><input type="checkbox" name="check_897206" value=1></td>
                        <td>
                            <nobr>4. Superman</nobr>
                        </td>
                        <td><input type="text" size=16 name="begin_897206" value="16.06.2020 16:30"></td>
                        <td><input type="text" size=16 name="end_897206" value="16.06.2020 18:00"></td>
                        <td><input type="text" size=50 name="comment_897206" value="" </td>

                    </tr>
                    <tr>
                        <td><input type="checkbox" name="check_897207" value=1></td>
                        <td>
                            <nobr>5. Spiderman</nobr>
                        </td>
                        <td><input type="text" size=16 name="begin_897207" value="16.06.2020 16:30"></td>
                        <td><input type="text" size=16 name="end_897207" value="16.06.2020 18:00"></td>
                        <td><input type="text" size=50 name="comment_897207" value="" </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="check_897208" value=1></td>
                        <td>
                            <nobr>6. Wonderwoman</nobr>
                        </td>
                        <td><input type="text" size=16 name="begin_897208" value="16.06.2020 16:30"></td>
                        <td><input type="text" size=16 name="end_897208" value="16.06.2020 18:00"></td>
                        <td><input type="text" size=50 name="comment_897208" value="" </td>

                    </tr>
                    <tr>
                        <td><input type="checkbox" name="check_897209" value=1></td>
                        <td>
                            <nobr>7. Thor</nobr>
                        </td>
                        <td><input type="text" size=16 name="begin_897209" value="16.06.2020 16:30"></td>
                        <td><input type="text" size=16 name="end_897209" value="16.06.2020 18:00"></td>
                        <td><input type="text" size=50 name="comment_897209" value="" </td>

                    </tr>
                    <tr>
                        <td><input type="checkbox" name="check_897210" value=1></td>
                        <td>
                            <nobr>8. Mouse, Mickey</nobr>
                        </td>
                        <td><input type="text" size=16 name="begin_897210" value="16.06.2020 16:30"></td>
                        <td><input type="text" size=16 name="end_897210" value="16.06.2020 18:00"></td>
                        <td><input type="text" size=50 name="comment_897210" value="" </td>

                    </tr>


                </table>
            </div>


            <script>
                function myFunction() {

                    var tnList = ["Duck, Donald", "Duck, Daisy", "Batman", "Superman", "Spiderman"];

                    var masterDiv = document.getElementById("check_part");
                    var rows = masterDiv.getElementsByTagName("table")[0].rows;

                    for (var i = 0; i < rows.length; i++) {
                        console.log(tnList[i]);

                        var content = String(rows[i].innerText).includes("Duck, Donald");
                        console.log(i);



                        if (content) {
                            var checkbox = rows[i].getElementsByTagName("input")[0].checked = true;

                        }
                        // if ()
                        //     var last = rows[rows.length - 1];
                        // var cell = last.cells[0];
                        // var value = cell.innerHTML;
                        // console.log(value);

                    }
                };
            </script>

</body>

</html>

Это определенно мелочь, которую я не вижу ... может ли кто-нибудь помочь, пожалуйста?!

Заранее большое спасибо!

Кристиан

1 Ответ

0 голосов
/ 07 августа 2020

Вам нужно l oop над строками И вашим строковым массивом.

Вы только что проверяли, содержит ли строка 0 (которая является строкой заголовков) "Duck, Donald", а строка 1 содержит " Дак, Дейзи »и так далее ...

Это рабочий пример: 

for (var i = 0; i < rows.length; i++) {
                    
    for (var j = 0; j < tnList.length; j++) {
        var content = String(rows[i].innerText).includes(tnList[j]);

        if (content) {
            var checkbox = rows[i].getElementsByTagName("input")[0].checked = true;
        }
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...