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 = "";
            }
        }

IPPHONE

        $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）。使用该方法访问该表，您可以像我这里使用Object.keys()或标准for ...in循环来迭代并检查您的条件。

我通常认为重新搜索是重置，因此默认情况下会使所有内容都不可见，然后只显示匹配项，这样也可以通过删除其他内容来清理代码。

我将数字附加到表格中的第一个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

你必须为内心添加。首先＆＃39;为＆＃39;对于下一个td和其他＆＃39; for＆＃39;为下一个tr。

表仅搜索第一个TD

2 个答案: