HTML + JS:当字符串来自数组时,搜索字符串不起作用

时间:2020-08-07 10:00:40

标签: javascript html string search

我正在尝试使用include()方法将表中的列表与字符串中的名称列表进行比较。但是,我被困住了,我也不明白为什么。

当我将字符串硬编码到include()方法中时,它可以完美工作。当字符串来自包含字符串的数组时,它找不到它,而且我真的无法制作它的头和尾...

此代码无效:

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

当我仅将include()方法更改为使用硬编码的字符串时,它突然起作用:

    <!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 :(得分:0)

您需要遍历行和字符串数组。

您只是在检查第0行(标题行)是否包含“ Duck,Donald”,是否在第1行中包含“ Duck,Daisy”,依此类推...

这是一个有效的示例:

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;
        }
    }
}
相关问题