Блог

Я использую следующий скрипт для фильтрации таблицы при вводе пользователями. После ввода пользователем таблицы начинается фильтрация строк. Входные данные сохраняются, поэтому при обновлении / перезагрузке страницы строки, отфильтрованные пользователем, остаются активными. После обновления заголовок таблицы исчезает, и отображаются только отфильтрованные строки. У кого-нибудь есть идеи, как сохранить заголовок таблицы активным после фильтрации таблицы?

Это часть кода;

       <table class="userprof" align='left'>
        <tr>
          <td class="footer">Filter:
            <input type="text" id="myInput" name="filter" style = "color:black !important;" onkeyup='saveValue(this);' placeholder="Filter table...">
          </td>
        </tr>
      </table>
    </p><br /><br /><br />
        
    
        
    </head>
    
    
        <table width="99%" id="myTable" class="sortable" >
        <tr>
     
        <td class="header" style="padding: 1px;">Name</td>
        <td class="header">Email</td>
        <td class="header">Edit</td></tr>
     
     
    <?  //Selecteer accounts.
      
    
      $stmt = $mysqli->prepare("SELECT * FROM account WHERE purpose= ?");
      $stmt->bind_param("s", $status);
      $stmt->execute();
      $result = $stmt->get_result(); 
    }
     while ($row = $result->fetch_assoc()) { 
    
       <tr>
        <td style="color:<?= htmlspecialchars($cat_color) ?> ", class="footer"><?= htmlspecialchars($row['name']) ?></td>
        
    
        <td style="color:<?= htmlspecialchars($cat_color) ?> ", class="footer"><?= htmlspecialchars($row['email']) ?></td>
      
        
        <td class="footer" width="1px"><input type="button" value="Edit" id="<?php echo htmlspecialchars($row['id']); ?>" onClick="this.style.color='gold';"
        class="submit edit_data" /></td>
      
       
        </form>
        </tr>
        
        
        <? } ?>
        </table><div id="bottom"></div>
    
<script>

// Store the input in a variable for reference.
var myInput = document.getElementById("myInput");
var savedValue = getSavedValue("myInput");

// Immediately filter the table and set the input value.
filterTable(savedValue);
myInput.value = savedValue;

//Save the value function - save it to localStorage as (ID, VALUE)
function saveValue(e) {
  var id = e.id; // get the sender's id to save it . 
  var val = e.value; // get the value. 
  localStorage.setItem(id, val); // Every time user writing something, the localStorage's value will override . 
}

//get the saved value function - return the value of "v" from localStorage. 
function getSavedValue(v) {
  if (!localStorage.getItem(v)) {
    return ""; // You can change this to your default value. 
  }
  return localStorage.getItem(v);
}

function filterTable(value) {
  console.log(value);
  var filter = value.toUpperCase();
  var rows = document.querySelector("#myTable tbody").rows;

  for (var i = 0; i < rows.length; i  ) {
    var nameCol = rows[i].cells[1].textContent.toUpperCase();
    var rankCol = rows[i].cells[2].textContent.toUpperCase();
    var rankerCol = rows[i].cells[5].textContent.toUpperCase();
    var typeCol = rows[i].cells[6].textContent.toUpperCase();
    var emailCol = rows[i].cells[3].textContent.toUpperCase();
    var ownerCol = rows[i].cells[8].textContent.toUpperCase();
    if (nameCol.indexOf(filter) > -1 || rankCol.indexOf(filter) > -1 || ownerCol.indexOf(filter) > -1 || rankerCol.indexOf(filter) > -1 || typeCol.indexOf(filter) > -1 || emailCol.indexOf(filter) > -1) {
      rows[i].style.display = "";
    } else {
      rows[i].style.display = "none";
    }
  }
}

myInput.addEventListener('keyup', function(event) {
 console.log(event); // Check if the event is fired.
 var value = event.target.value;
 saveValue(event);
 filterTable(value);
});
</script>
  

Ответ был довольно простым, как кажется.

Я изменил это:

 <table width="99%" id="myTable" class="sortable" >
        <tr>
     
        <td class="header" style="padding: 1px;">Name</td>
        <td class="header">Email</td>
        <td class="header">Edit</td></tr>
  

К этому:

 <table width="99%" id="myTable" class="sortable" >
        
     
        <thead><td class="header" style="padding: 1px;">Name</td>
        <td class="header">Email</td>
        <td class="header">Edit</td></thead>
 
 
  

И моя проблема решена. Спасибо за чтение, извините за, казалось бы, простой вопрос.