搜索功能在html表中不起作用

时间：2017-06-06 09:28:33

标签： javascript html

我的表中有大量的数据记录，我将从数据库表中获取数据，因此我需要搜索选项来过滤数据。 搜索功能无效。 当我在搜索框中输入任何单词时，它不会显示任何内容，也不表示记录不存在也不会引发任何错误。 ***预期：***当用户在搜索框中输入任何内容时，应显示与这些单词相关的记录。请检查代码并告诉我如何解决。

       <?php
$db_host = 'localhost'; // Server Name
$db_user = 'root'; // Username
$db_pass = ''; // Password
$db_name = 'contacts'; // Database Name

$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if (!$conn) {
die ('Failed to connect to MySQL: ' . mysqli_connect_error());  
 }

$sql = 'SELECT * 
    FROM contact';

$query = mysqli_query($conn, $sql);

if (!$query) {
die ('SQL Error: ' . mysqli_error($conn));
}
?>
<html>
<head>
<title>Displaying MySQL Data in HTML Table</title>
<style type="text/css">
    body {
        font-size: 15px;
        color: #343d44;
        font-family: "segoe-ui", "open-sans", tahoma, arial;
        padding: 0;
        margin: 0;
    }
    table {
        margin: auto;
        font-family: "Lucida Sans Unicode", "Lucida Grande", "Segoe Ui";
        font-size: 12px;
    }

    #myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 50%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}


#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

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

#myTable tr {
 border-bottom: 1px solid #ddd;
}

 #myTable tr.header, #myTable tr:hover {
 background-color: #f1f1f1;
}

    /* Table */
    .data-table {
        border-collapse: collapse;
        font-size: 14px;
        min-width: 537px;
    }

    .data-table th, 
    .data-table td {
        border: 1px solid #e1edff;
        padding: 7px 17px;
    }
    .data-table caption {
        margin: 7px;
    }

    /* Table Header */
    .data-table thead th {
        background-color: #508abb;
        color: #FFFFFF;
        border-color: #6ea1cc !important;
        text-transform: uppercase;
    }

    /* Table Body */
    .data-table tbody td {
        color: #353535;
    }
    .data-table tbody td:first-child,
    .data-table tbody td:nth-child(4),
    .data-table tbody td:last-child {
        text-align: right;
    }

    .data-table tbody tr:nth-child(odd) td {
        background-color: #f4fbff;
    }
    .data-table tbody tr:hover td {
        background-color: #ffffa2;
        border-color: #ffff0f;
    }

    /* Table Footer */
    .data-table tfoot th {
        background-color: #e5f5ff;
        text-align: right;
    }
    .data-table tfoot th:first-child {
        text-align: left;
    }
    .data-table tbody td:empty
    {
        background-color: #ffcccc;
    }
  </style>
</head>
<body>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table class="data-table" id="example">
    <caption class="title">US Data</caption>
    <thead>
        <tr>
            <th>ContactID</th>
            <th>ContactOwner</th>
            <th>LeadSource</th>
            <th>First_name</th>
            <th>Last_name</th>
            <th>AccountName</th>
            <th>Title</th>
            <th>EmailID</th>
            <th>Department</th>
            <th>Industry</th>
            <th>Phone</th>
            <th>Mobile</th>
            <th>Fax</th>
            <th>DOB</th>
            <th>Assistant</th>
            <th>AsstPhone</th>
            <th>ReportsTo</th>
            <th>LinkedIn</th>
            <th>CallStatus</th>
            <th>Street</th>
            <th>OtherStreet</th>
            <th>City</th>
            <th>State</th>
            <th>Zip</th>
            <th>Country</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
    <?php
    $no     = 1;
    $total  = 0;
    while ($row = mysqli_fetch_array($query))
    {

        echo '<tr>
                <td>'.$row['ContactID'].'</td>
                <td>'.$row['ContactOwner'].'</td>
                <td>'.$row['LeadSource'].'</td>
                <td>'.$row['First_name'].'</td>
                <td>'.$row['Last_name'].'</td>
                <td>'.$row['AccountName'].'</td>
                <td>'.$row['Title'].'</td>
                <td>'.$row['EmailID'].'</td>
                <td>'.$row['Department'].'</td>
                <td>'.$row['Industry'].'</td>
                <td>'.$row['Phone'].'</td>
                <td>'.$row['Mobile'].'</td>
                <td>'.$row['Fax'].'</td>
                <td>'.$row['DOB'].'</td>
                <td>'.$row['Assistant'].'</td>
                <td>'.$row['AsstPhone'].'</td>
                <td>'.$row['ReportsTo'].'</td>
                <td>'.$row['LinkedIn'].'</td>
                <td>'.$row['CallStatus'].'</td>
                <td>'.$row['Street'].'</td>
                <td>'.$row['OtherStreet'].'</td>
                <td>'.$row['City'].'</td>
                <td>'.$row['State'].'</td>
                <td>'.$row['Zip'].'</td>
                <td>'.$row['Country'].'</td>    
                <td>'.$row['Description'].'</td>                    
            </tr>';

        $no++;
    }?>
    </tbody>
</table>
<script>
function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("example");
  tr = table.getElementsByTagName("tr");
  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";
  }
 }       
}
}
</script>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

你的声明“它不起作用”并非严格属实。它确实有效，但仅限于有限的情况。如果你进行了彻底的测试，你可以在问题中提供这些数据 - 这就是我的意思，详细解释问题并提供完整的信息。

无论如何，代码存在许多问题。

1）它只搜索任何行的第一列（getElementsByTagName("td")[0]仅返回第一列）

2）如果您的任何<td>元素因任何原因要包含更多HTML，它也会搜索HTML标记。 innerHTML应替换为innerText以避免这种情况。

3）搜索完所有列后，显示/隐藏整个<tr>的简单if / else逻辑将失败，因为每次循环遍历列时，都可能导致列再次被隐藏，当前一次迭代导致它被显示时。相反，假设它将被隐藏，然后仅在列中的搜索文本至少有一个匹配时显示它。

4）我认为一旦你获得了很多行，你就会遇到性能和可用性问题，因为一旦用户键入一个字符就会开始搜索。如果你键入“s”并且有数千行包含数千个单元格，那么70％的行将包含“s”（至少在英语中）。它会降低系统速度并为用户提供任何价值。我写了我的例子，直到用户输入3个字符才开始。您可能希望在最终产品（或相关培训材料）中提供相关说明。

这是一个工作版本，使用一些基本的非常随机的样本数据。请注意，“示例”ID移动到<tbody>元素上，以避免意外隐藏表头。

function myFunction() {
  var input, filter, table, tr, td, i;
  var input = document.getElementById("myInput");
  var filter = input.value.toUpperCase();
  
  var table = document.getElementById("example");
  var trList = table.getElementsByTagName("tr");
  
  for (i = 0; i < trList.length; i++)
  {
    //don't initiate search unless user types at least 3 characters. This will greatly improve performance and usability especially with large tables.
    if (filter.length >= 3)
    {
	  var match = false;
      var tdList = trList[i].getElementsByTagName("td");

	  //loop through every td
	  for (j = 0; j < tdList.length; j++)
	  {
	    var td = tdList[j];

        if (td)
	    {
          if (td.innerText.toUpperCase().indexOf(filter) > -1) {
		    match = true;
          }
	    }
      }
	  
	  if (match == true)
	  {
        trList[i].style.display = "";
	  }
	  else
	  {
		trList[i].style.display = "none";
	  }
	}
    else
    {
      trList[i].style.display = "";
    }
  }
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<table class="data-table">
	<thead>
        <tr>
            <th>ContactID</th>
            <th>ContactOwner</th>
            <th>LeadSource</th>
		</tr>
	</thead>
	<tbody id="example">
		<tr>
			<td>Fish</td>
			<td>Fishing</td>
			<td>Test</td>
		</tr>
		<tr>
			<td>Hello</td>
			<td>World</td>
			<td>Estate</td>
		</tr>
		<tr>
			<td>Yellow</td>
			<td>Calling</td>
			<td>Bring</td>
		</tr>
	</tbody>
</table>

相关问题
最新问题