Question

我一直在尝试使用搜索和过滤器选项，但似乎搜索选项仅适用于第一列，即“ID”。我希望它适用于所有列，特别是名称和密码列。任何帮助表示赞赏。谢谢！

PHP

if(i>0) {
    for(int j =0; j<4;j++) {
        Serial.print(str[j]);
    }
    Serial.println("");
}

的JavaScript

<div class="table">
          <h3 class="page-header">Agents Table</h3>
          <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search" title="type in a name">
          <table id="grid-basic" class="table table-condensed table-hover table-striped">
            <thead>
              <tr>
                <th data-column-id="id" data-type="numeric">ID</th>
                <th data-column-id="name">Agent's Name</th>
                <th data-column-id="contact">Contact</th>
                <th data-column-id="location">Location</th>
                <th data-column-id="pin">PIN</th>
                <th data-column-id="action">Action</th>
              </tr>
            </thead>
            <?php
            $stmt = $con->prepare("SELECT * FROM agents ORDER BY id ASC");
            $stmt ->execute();
            $results = $stmt->fetchAll();
            foreach($results as $row){
              ?>
              <tbody>
                <tr>
                  <td><?=$row['id'];?></td>
                  <td><?=$row['name'];?></td>
                  <td><?=$row['contact'];?></td>
                  <td><?=$row['location'];?></td>
                  <td><?=$row['pin'];?></td>
                  <td><?php echo '<a href="agentlog.php?id='.$row['name'].'"><button type="button" class="btn btn-primary btn-md" >View</button></a>';?></th>
                  </tr>
                </tbody>
                <?php
              }
              ?>
            </table>
          </div>

Answer 1

在您的代码中，您循环所有TR并且只循环第一个TD（ID列）。

td = tr[i].getElementsByTagName("td")[0]; // [0] this select the first TD

解决方案是通过TR的所有TD的循环

for (j = 0; j < tr[i].getElementsByTagName("td").length; j++) {
  var td = tr[i].getElementsByTagName("td")[j];
  if (td) {
    if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
      found = true; // If you find the text just once then...
    }
  }
}

工作代码

尝试搜索“alexa”...

function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("grid-basic");
  tr = table.getElementsByTagName("tr");
  
  for (i = 1; i < tr.length; i++) { // from 1, not header
    
    tr[i].style.display = "";
    var found = false;
    
    for (j = 0; j < tr[i].getElementsByTagName("td").length; j++) {
      var td = tr[i].getElementsByTagName("td")[j];
      if (td) {
        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
          found = true;
        }
      }
    }
    
    if (found) {
      tr[i].style.display = "";
    } else {
      tr[i].style.display = "none";
    }
    
  }
}

<div class="table">
  <h3 class="page-header">Agents Table</h3>
  <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search" title="type in a name">
  <table id="grid-basic" class="table table-condensed table-hover table-striped">
    <thead>
      <tr>
        <th data-column-id="id" data-type="numeric">ID</th>
        <th data-column-id="name">Agent's Name</th>
        <th data-column-id="contact">Contact</th>
        <th data-column-id="location">Location</th>
        <th data-column-id="pin">PIN</th>
        <th data-column-id="action">Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Alex</td>
        <td>33333373</td>
        <td>World</td>
        <td>123456</td>
        <td><a href="agentlog.php?id=name"><button type="button" class="btn btn-primary btn-md" >View</button></a></td>
      </tr>
      <tr>
        <td>2</td>
        <td>Alexander</td>
        <td>566656456</td>
        <td>Europe</td>
        <td>789456</td>
        <td><a href="agentlog.php?id=name"><button type="button" class="btn btn-primary btn-md" >View</button></a></td>
      </tr>
    </tbody>

  </table>
</div>

Answer 2

您可能需要遍历所有td元素，而您只是先选择。

for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td");
    for(j=0;j<td.length;j++)
        if (td[j]) {
            // Here you will have access to all cells in the table.
            if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }
    }  
}

Answer 3

看起来问题就在这里：

    for (i = 0; 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";
        }
      }
    }

尝试用以下代码替换上面的代码：

    var columns; // Array with all the <td>'s, found in the row
    for (i = 0; i < tr.length; i++) {
        columns = tr[i].getElementsByTagName("td");

        // Iterate through all the found columns
        for (var j = 0; j < columns.length; j++) {
            // Make search in each column
            td = columns[j];
            if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }

javascript搜索仅适用于一个（第一）列而不是整个html表

3 个答案: