Question

我正在使用搜索框来过滤表格中的结果。问题是当您搜索时，它会删除标题行。我希望它保留标题，并仅从标题下面进行搜索。我使用了以下网站的脚本：https://www.w3schools.com/howto/howto_js_filter_table.asp

我不确定这有什么不足，因为当我使用演示时，他们是否按预期工作。

<head>
<meta name="viewport" content="width=device-width, initial-scale=1" /> 

        <?php
        include 'config/config.php';

?>  
        <style type="text/css">

        #myInput {
  background-position: 10px 12px; 
  background-repeat: no-repeat; 
  width: 25%;
  font-size: 16px; 
  padding: 12px 20px 12px 40px; 
  border: 1px solid #ddd; 
  margin-bottom: 12px; 
} 
#products {
  border-collapse: collapse; 
  width: 100%; 
  border: 1px solid #ddd; 
  font-size: 18px; 
}

#products th, #products td {
  text-align: left; 
  padding: 12px; 
}

#products tr {

  border-bottom: 1px solid #ddd; 
}

#products tr.header, #products tr:hover {

  background-color: #f1f1f1;
}



        </style>
</head>


<input type="text" id="myInput" onkeyup="imwireless()" placeholder="Search for location..">

<script>
function imwireless() {

  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("products");
  tr = table.getElementsByTagName("tr");

  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  }
}
</script>

<?php



        ############## Make the mysql connection ###########
        try {
                $db = new PDO("mysql:host=$hostname;dbname=realestate", $username, $password);            
                $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING);
                $i_d = $_POST['search'];





                ////////This is the main table for keywords//////////

                $count = $db->exec($sql);
                $sql = "Select * from realestate WHERE Store_City_State LIKE '%" . $i_d . "%' OR Store_Street_Address LIKE '%" . $i_d . "%'  ";
                $result = $db->query($sql);
                echo "<table id='products'>";
                echo'<tr class="header" id="top" style="background-color:#fff111"> ';
                echo"<td>Store City State #</td>";
                echo"<td id='name'>Store_Street_Address</td>";
                echo"<td>Current Lease?</td>";
                echo"<td>Monthly Rent</td>";
                echo"<td>Lease Expire Date</td>";
                echo"<td>Open Date</td>";
                echo"<td>Notes on Location</td>";
                foreach ($result as $data) {
                        echo ' 
                        <tr style="background-color:#34495E;"> 
                        <td id="city">'.$data["Store_City_State"].'</td> 
                        <td id="address">'.$data["Store_Street_Address"].'</td> 
                        <td id="lease">'.$data["Do_we_have_a_current_valid_Lease"].'</td> 
                        <td id="rent">'.$data["Current_Monthly_Rent_including_Triple_Net"].'</td> 
                        <td id="expdate">'.$data["Lease_expiration_date"].'</td>
                        <td id="opendate">'.$data["Store_opening_date"].'</td>
                        <td id="notes">'.$data["notes"].'</td>';




                }
                echo "</tr></table>";
                //echo 'entry succesfull';
                $db = null; // close the database connection

        }
        catch(PDOException $e) {
                echo $e->getMessage();
        }

        ///////// END MAIN TABLE/////////////////////////       
?>

Answer 1

这是客户端表过滤的示例。

将代码分解为单独的方法，以使维护更容易阅读。

请注意，我们使用class来标记可过滤的部分。这将使我们能够搜索多个表。

您可能还希望有一个match委托，然后可以突出显示/过滤等。

// scaffold code to help
const buildARow = (seed) => `<td>${seed++}</td><td>${seed++}</td><td>${seed++}</td><td>${seed++}</td>`;

const buildTable = () => {
  const tbody = document.querySelector('tbody');
  let row = 0;
  for (i = 0; i < 15; i++) {
    let newRow = document.createElement('tr');
    newRow.innerHTML = buildARow(++row);
    tbody.appendChild(newRow);
    if (row % 3 === 0) row = 0;
  }
}

document.addEventListener('DOMContentLoaded', () => {
  buildTable();
});
// End of scaffold code.

/**
 * Row should be TR
 */
const isMatch = (search, row) => [...row.querySelectorAll('td')].some(td => td.innerText.toLowerCase() === search.toLowerCase());

const getFilterable = () => document.querySelectorAll('tbody.filterable tr');

const filterData = (search) => {
  if (search === undefined || search.trim() === '') {
    // show ALL
    getFilterable().forEach(tr => tr.classList.remove('hide'));
    return;
  }
  // Loop each TR in the .filterable 
  getFilterable().forEach(tr => {
    if (isMatch(search, tr)) {
      tr.classList.remove('hide');
    } else {
      tr.classList.add('hide');
    }
  });
};

// Listen for search
document.addEventListener('keyup', (e) => {
  if (e.target.matches('#search')) {
    filterData(e.target.value);
  }
});

.hide {
  display: none;
}

<input type="text" id="search">
<h2>Items</h2>
<table>
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
      <th>Heading 3</th>
      <th>Heading 4</th>
    </tr>
  </thead>
  <tbody class="filterable">

  </tbody>
</table>

搜索时保留第一行标题

1 个答案: