3
我有一個帶有兩個列表切換的排行榜。當我按每週記分卡 - 每週列表顯示，當我按總體記分卡時，總體顯示。 僅供參考，它的工作原理有點像這樣：https://jsfiddle.net/pvwvdgLn/1/搜索列表中的元素
我的列表員工人數爲1000人。
問題是，此處用於搜索列表中的員工的搜索框不起作用。 我正試圖找到一種方法來搜索列表中的員工。
這裏是我的領導板的圖像： pic for the leader board
我從我的DB迴盪在領先榜的列表中，這樣的鏈接是不斷變化的，因爲這是排行榜是如何應該是。
PHP參與排行榜：
<div class="tab-content">
<div id="weeklylb" class="leadboardcontent">
<div class="leaderboard" id="leaderboard">
<ol id = "myOL">
<mark>
<?php
$sql11 = "SELECT *
FROM pointsBadgeTable
WHERE WeekNumber ='week04'
ORDER BY pointsRewarded desc";
if(($stmt1221 = sqlsrv_query($conn, $sql11)) != false){
do {
while ($row1221 = sqlsrv_fetch_array($stmt1221, SQLSRV_FETCH_ASSOC)) {
$resultt[] = $row1221;
}
} while (sqlsrv_next_result($stmt1221));
foreach($resultt as $row1221){
// echo '<li><mark data-id="'.$row1221['EmployeeID'].'">'. $row1221['EmployeeName'].'</mark><small>"'.$row1221['pointsRewarded'].'</small></li>';
echo "<li><mark data-id='".$row1221['EmployeeID']."' class='parent-div'><span class='rank'>" . $row1221['rank'] . "</span><span class='name'>" . $row1221['EmployeeName'] . "</span><span class='points'>" . $row1221['pointsRewarded'] . "</span></mark></li>";
// echo "<div data-id='".$row1221['EmployeeID']."' class='parent-div'><span class='rank'>" . $row1221['rank'] . "</span><span class='name'>" . $row1221['EmployeeName'] . "</span><span class='points'>" . $row1221['pointsRewarded'] . "</span></div>";
}
// var_dump($resultt);
} else {
echo 'sql error';
}
?>
</mark>
</ol>
</div>
<svg style="display: none;">
<symbol id="cup" x="0px" y="0px" width="25px" height="26px" viewBox="0 0 25 26" enable-background="new 0 0 25 26" xml:space="preserve">
<path fill="#F26856" d="M21.215,1.428c-0.744,0-1.438,0.213-2.024,0.579V0.865c0-0.478-0.394-0.865-0.88-0.865H6.69
\t \t \t \t \t \t \t \t \t \t \t \t \t \t C6.204,0,5.81,0.387,5.81,0.865v1.142C5.224,1.641,4.53,1.428,3.785,1.428C1.698,1.428,0,3.097,0,5.148
\t \t \t \t \t \t \t \t \t \t \t \t \t \t C0,7.2,1.698,8.869,3.785,8.869h1.453c0.315,0,0.572,0.252,0.572,0.562c0,0.311-0.257,0.563-0.572,0.563
\t \t \t \t \t \t \t \t \t \t \t \t \t \t c-0.486,0-0.88,0.388-0.88,0.865c0,0.478,0.395,0.865,0.88,0.865c0.421,0,0.816-0.111,1.158-0.303
\t \t \t \t \t \t \t \t \t \t \t \t \t \t c0.318,0.865,0.761,1.647,1.318,2.31c0.686,0.814,1.515,1.425,2.433,1.808c-0.04,0.487-0.154,1.349-0.481,2.191
\t \t \t \t \t \t \t \t \t \t \t \t \t \t c-0.591,1.519-1.564,2.257-2.975,2.257H5.238c-0.486,0-0.88,0.388-0.88,0.865v4.283c0,0.478,0.395,0.865,0.88,0.865h14.525
\t \t \t \t \t \t \t \t \t \t \t \t \t \t c0.485,0,0.88-0.388,0.88-0.865v-4.283c0-0.478-0.395-0.865-0.88-0.865h-1.452c-1.411,0-2.385-0.738-2.975-2.257
\t \t \t \t \t \t \t \t \t \t \t \t \t \t c-0.328-0.843-0.441-1.704-0.482-2.191c0.918-0.383,1.748-0.993,2.434-1.808c0.557-0.663,1-1.445,1.318-2.31
\t \t \t \t \t \t \t \t \t \t \t \t \t \t c0.342,0.192,0.736,0.303,1.157,0.303c0.486,0,0.88-0.387,0.88-0.865c0-0.478-0.394-0.865-0.88-0.865
\t \t \t \t \t \t \t \t \t \t \t \t \t \t c-0.315,0-0.572-0.252-0.572-0.563c0-0.31,0.257-0.562,0.572-0.562h1.452C23.303,8.869,25,7.2,25,5.148
\t \t \t \t \t \t \t \t \t \t \t \t \t \t C25,3.097,23.303,1.428,21.215,1.428z M5.238,7.138H3.785c-1.116,0-2.024-0.893-2.024-1.99c0-1.097,0.908-1.99,2.024-1.99
\t \t \t \t \t \t \t \t \t \t \t \t \t \t c1.117,0,2.025,0.893,2.025,1.99v2.06C5.627,7.163,5.435,7.138,5.238,7.138z M18.883,21.717v2.553H6.118v-2.553H18.883
\t \t \t \t \t \t \t \t \t \t \t \t \t \t L18.883,21.717z M13.673,18.301c0.248,0.65,0.566,1.214,0.947,1.686h-4.24c0.381-0.472,0.699-1.035,0.947-1.686
\t \t \t \t \t \t \t \t \t \t \t \t \t \t c0.33-0.865,0.479-1.723,0.545-2.327c0.207,0.021,0.416,0.033,0.627,0.033c0.211,0,0.42-0.013,0.627-0.033
\t \t \t \t \t \t \t \t \t \t \t \t \t \t C13.195,16.578,13.344,17.436,13.673,18.301z M12.5,14.276c-2.856,0-4.93-2.638-4.93-6.273V1.73h9.859v6.273
\t \t \t \t \t \t \t \t \t \t \t \t \t \t C17.43,11.638,15.357,14.276,12.5,14.276z M21.215,7.138h-1.452c-0.197,0-0.39,0.024-0.572,0.07v-2.06
\t \t \t \t \t \t \t \t \t \t \t \t \t \t c0-1.097,0.908-1.99,2.024-1.99c1.117,0,2.025,0.893,2.025,1.99C23.241,6.246,22.333,7.138,21.215,7.138z" />
</div>
<!-- weekly div ends -->
<div id="overalllb" class="leadboardcontent" style="display:none">
<div class="leaderboard" id="leaderboard">
<ol id = "myOL">
<mark>
<?php
$q4 = "select *
from EmployeeTable
order by Total_points_Rewarded desc";
if(($stmt33 = sqlsrv_query($conn, $q4)) != false){
do {
while ($row333 = sqlsrv_fetch_array($stmt33, SQLSRV_FETCH_ASSOC)) {
$resulttt[] = $row333;
}
} while (sqlsrv_next_result($stmt33));
foreach($resulttt as $row333){
// echo '<li><mark data-id="'.$row1221['EmployeeID'].'">'. $row1221['EmployeeName'].'</mark><small>"'.$row1221['pointsRewarded'].'</small></li>';
echo "<li><mark data-id='".$row333['EmployeeID']."' class='parent-div'><span class='rank'>" . $row333['overallRank'] . "</span><span class='name'>" . $row333['EmployeeName'] . "</span><span class='points'>" . $row333['Total_points_Rewarded'] . "</span></mark></li>";
// echo "<div data-id='".$row1221['EmployeeID']."' class='parent-div'><span class='rank'>" . $row1221['rank'] . "</span><span class='name'>" . $row1221['EmployeeName'] . "</span><span class='points'>" . $row1221['pointsRewarded'] . "</span></div>";
}
// var_dump($resultt);
} else {
echo 'sql error';
}
?>
</mark>
</ol>
</div>
<!-- leaderboard div ends here of overall-->
</div>
<!-- overall div ends here -->
</div>與搜索框關聯的HTML：
<div id="search5back">
<form method="get" action="/search" id="searchbox5">
<input id="search52" name="q" type="text" size="40" onkeyup="myFunction()" placeholder="Search an Employee ...." />
</form>
</div>的Javascript我曾嘗試：
function myFunction() {
var input, filter, ol, li, a, i;
input = document.getElementById("search52");
filter = input.value.toUpperCase();
ol = document.getElementById("myOL");
li = ol.getElementsByTagName("li");
divs=li[0].getElementsByClassName("parent-div");
for (i = 0; i < divs.length; i++) {
a = divs[i].getElementsByClassName("name")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
divs[i].style.display = "";
} else {
divs[i].style.display = "none";
}
}
}搜索方框需要爲無論是在領先榜名單的工作。我認爲ol的id爲id="myol"的列表需要不同。
你介意重新格式化您的發佈源代碼？水平滾動條不會提高可讀性。 – reporter