我需要帮助来理解用于使用搜索栏搜索列表的 Javascript 函数，以便我可以修改它来搜索 table

Question

我正在做一项大学作业，我使用 PHP class 生成 table 值，然后 Javascript 函数使用搜索栏进行搜索。它建立在以前使用相同搜索栏搜索无序列表的作业的基础上。它对列表非常有用，但它使用了一个已经提供给我的函数，坦率地说，我不知道它是如何工作的。现在，一旦我添加了一个包含多个单元格的 table 行，它所做的就是搜索第一个单元格。它仍然是 returns 整行，但我还需要它来搜索整行。

似乎 a = tr[i].getElementsByTagName("a")[0]; 只有 returns 第一个 <a> 这可能是问题所在，但我不知道如何解决这个问题'破坏功能。

让我困惑的功能如下。我向其中添加了自己的代码以隐藏 list/table ，这显然是我理解的。我不会包括那个，但这就是为什么你没有看到我关闭该功能，这样你就不会对此感到困惑。

function myFunction() {
    var input, filter, table, tr, a, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase(); 
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
            
    for (i = 0; i < tr.length; i++) {
        a = tr[i].getElementsByTagName("a")[0];
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
        }
    }

作为参考，这是我为测试添加的多单元格 table 行，它现在给我带来了问题。我还包括实际的搜索栏本身，因为它包含用于解释功能的相关语法。还有其他行，因此 table 稍后关闭。

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">     <!--This is my search bar-->
<table id="myTable" onload="hideList()">
    <tbody>
        <tr id="1">
            <?php 
                $pr0 = new productRow(0);
                echo 
                    "<td><a href=\"#\">" . $pr0->itemNumber . "</td></a>" . 
                    "<td><a href=\"#\">" . $pr0->name . "</td></a>" . 
                    "<td><a href=\"#\">" . $pr0->type . "</td></a>" .               //These rows concatenate the class instances with the elements in which they are supposed to appear
                    "<td><a href=\"#\">" . $pr0->model . "</td></a>" . 
                    "<td><a href=\"#\">" . $pr0->brand . "</td></a>" . 
                    "<td><a href=\"#\">" . $pr0->description . "</td></a>";
            ?>
        </tr>

我会把 PHP class 包括进来，这样你就可以看到它是如何输入东西的，但别担心，它是有效的。

<?php
    class productRow {
        var $itemNumber = [];
        var $name = [];
        var $type = [];
        var $model = [];
        var $brand = [];
        var $description = [];
        function __construct($i) {                                  //receives argument when class is called with an argument
            $this->itemNumber = $this->make_table_row($i)[0];
            $this->name = $this->make_table_row($i)[1];
            $this->type = $this->make_table_row($i)[2];
            $this->model = $this->make_table_row($i)[3];            //This function allows the instance values of the attributes to be taken from the make_table_row function
            $this->brand = $this->make_table_row($i)[4];
            $this->description = $this->make_table_row($i)[5];
        }
        function make_table_row($i) {                               //receives argument when class is called with an argument
            $row = 1;
            $tablerows = [];
            if (($input = fopen("input.csv", "r")) !== FALSE) {                 //gets the CSV with my table data
                while (($tabledata = fgetcsv($input, 1000, ",")) !== FALSE) {   //cycles through the rows of data creating arrays
                    if ($row == 1) {
                        $row++;     
                        continue;       //skips the first row because it's a header row I don't want on my input
                    }
                    $tablerows[] = $tabledata;      //uses the roles to populate a multidimensional array
                    $row++;
                }
                fclose($input);
                if (isset($tablerows[$i])) {
                    return $tablerows[$i];              //uses argument to return the appropriate array
                }
            }
        }
    }
?>

任何人都可以阐明这里发生了什么，以及我如何在不破坏功能的情况下获得所有 <a> 元素？

Answer 1

所以最后我自己弄明白了。结果是因为我不认识 MDN 文档上的一些术语，所以我正在阅读的关于 indexOf() 方法的文档是针对不同类型的参数的。因此 a = tr[i].getElementsByTagName("a")[0]; return 只是其当前迭代行的第一个标签，该标签被 txtValue 用于 return textContent 的字符串或innerText 和 txtValue.toUpperCase().indexOf(filter) 将这些字符串的大写字母与带有参数 filter 的输入的大写字母值进行比较，将当前迭代行上的 if-else 语句切换为隐藏或显示该行。

我意识到来自 table.getElementsByTagName("tr") 的 tr[i] 将使用当前迭代的标签，[i] 将其定位在数组上，只是为tr[i].getElementsByTagName("a")[0] 正在使用的节点以获取在那里 return 编辑的标签的行。所以我意识到，如果我只是单独使用 tr[i]，它会给我整行而不是该行的第一个 a。工作起来很有魅力。

function myFunction() {
    var input, filter, table, tr, a, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase(); 
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
        a = tr[i];
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
        }
    }

我需要帮助来理解用于使用搜索栏搜索列表的 Javascript 函数，以便我可以修改它来搜索 table

I need help understanding a Javascript function used to search a list with a search bar so I can modify it to search a table

html

javascript

arrays

loops

if-statement