表搜索仅第一个 TD

Question

我有一个运行良好的 javascript 搜索功能。 但是，它只搜索表中的第一个td ，而不搜索其他。 它似乎只适用于tr

完整代码：

PHP：

创建一个表来显示输出

    echo '<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">';
    echo '<div class="table-responsive">';
    echo '<table id="myTable"><tr bgcolor="#cccccc"><td>Name</td><td>Department</td><td>E-Mail Address</td><td>Office Phone</td><td>Mobile</td></tr>';

对于搜索返回的每个帐户

    for ($x=0; $x<$entries['count']; $x++){

从 Active Directory 检索值

名

        $LDAP_FirstName = "";

        if (!empty($entries[$x]['givenname'][0])) {
            $LDAP_FirstName = $entries[$x]['givenname'][0];
            if ($LDAP_FirstName == "NULL"){
                $LDAP_FirstName = "";
            }
        }

姓

        $LDAP_LastName = "";

        if (!empty($entries[$x]['sn'][0])) {
            $LDAP_LastName = $entries[$x]['sn'][0];
            if ($LDAP_LastName == "NULL"){
                $LDAP_LastName = "";
            }
        }

部门

        $LDAP_Department = "";

        if (!empty($entries[$x]['department'][0])) {
            $LDAP_Department = $entries[$x]['department'][0];
            if ($LDAP_Department == "NULL"){
                $LDAP_Department = "";
            }
        }

电子邮件地址

        $LDAP_InternetAddress = "";

        if (!empty($entries[$x]['mail'][0])) {
            $LDAP_InternetAddress = $entries[$x]['mail'][0];    
            if ($LDAP_InternetAddress == "NULL"){
                $LDAP_InternetAddress = "";
            }
        }

IP电话

        $LDAP_OfficePhone = "";

        if (!empty($entries[$x]['ipphone'][0])) {
            $LDAP_OfficePhone = $entries[$x]['ipphone'][0];
            if ($LDAP_OfficePhone == "NULL"){
                $LDAP_OfficePhone = "";
            }
        }

手机号码

        $LDAP_CellPhone = "";

        if (!empty($entries[$x]['mobile'][0])) {
            $LDAP_CellPhone = $entries[$x]['mobile'][0];
            if ($LDAP_CellPhone == "NULL"){
                $LDAP_CellPhone = "";
            }
        }

填表

        echo "<tr><td>".$LDAP_FirstName." " .$LDAP_LastName."</td><td>".$LDAP_Department."</td><td><a class='one' href='mailto:" .$LDAP_InternetAddress. "'>" .$LDAP_InternetAddress."</td><td>".$LDAP_OfficePhone."</td><td>".$LDAP_CellPhone."</td><tr>";


      } //END for loop
    } //END FALSE !== $result

ldap_unbind($ldap_connection); // Clean up after ourselves.
echo("</table>");
echo("</div>"); 
} //END ldap_bind

Javascript：

function myFunction() {
// Declare variables 
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");

// Loop through all table rows, and hide those who don't match the search query
for (i = 1; i < tr.length; i++) {
  td = tr[i].getElementsByTagName("td")[0];
     if (td) {
       if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
         tr[i].style.display = "";
       } else {
         tr[i].style.display = "none";
       }
     } 
   }
 }

用完整代码更新。 谢谢

Answer 1

我可能会这样做，我对表结构进行了一些小的更新（将头部与主体分开）并使用类而不是内联样式来更改可见性。

HTMLTableElement为进入 dom 对象（ tBodies 、 rows ）提供了一些有用的时间tBodies 。 使用该方法访问表，然后您可以使用Object.keys()就像我在这里一样，或者使用标准for ...in循环来迭代并检查您的条件。

我通常认为重新搜索是重置，因此默认情况下会使所有内容不可见，然后仅显示匹配项，这也通过消除对 else 的需要来清理代码。

我将数字附加到表中的第一个 td 以简化演示搜索，只需选择一个数字即可。

 function myFunction() { let rows = document.getElementById('myTable').tBodies[0].rows; Object.keys(rows).forEach(key => { rows[key].classList.add('filter'); const input = document.getElementById('myInput').value.toUpperCase(); const current = rows[key].cells[0].innerText.toUpperCase() if (current.indexOf(input) > -1) { rows[key].classList.remove('filter'); } }); }

 .filter { display: none; }

 <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."> <div class="table-responsive"> <table id="myTable"> <thead> <tr> <th>Name</th> <th>Department</th> <th>E-Mail Address</th> <th>Office Phone</th> <th>Mobile</th> </tr> </thead> <tbody> <tr> <td>search1</td></td><td>Department</td><td>E-Mail Address</td><td>Office Phone</td><td>Mobile</td> </tr> <tr> <td>search2</td></td><td>Department</td><td>E-Mail Address</td><td>Office Phone</td><td>Mobile</td> </tr> <tr> <td>search3</td></td><td>Department</td><td>E-Mail Address</td><td>Office Phone</td><td>Mobile</td> </tr> <tr> <td>search4</td></td><td>Department</td><td>E-Mail Address</td><td>Office Phone</td><td>Mobile</td> </tr> <tr> <td>search5</td></td><td>Department</td><td>E-Mail Address</td><td>Office Phone</td><td>Mobile</td> </tr> </tbody> </table>

Answer 2

你必须为内部添加。 第一个 'for' 用于下一个 td，另一个 'for' 用于下一个 tr。