JavaScript Suche Tabelle nach Index

Ich habe eine Tabelle mit mehreren Spalten (für diese Frage habe ich nur zwei Spalten) und ich möchte der Benutzer in der Lage, durch eine Spalte nach dem Index in Abhängigkeit von einer Option, die der Benutzer auswählen können . Ich habe Arbeitscode, aber um die Suchoption zu ändern, musste ich die Funktion für jede Eingabe kopieren.JavaScript Suche Tabelle nach Index

Wie kann ich nach dem Index suchen? Wenn ein Benutzer eine Option wie (Name) auswählt, ändert die JavaScript-Funktion den Index, nach dem er sucht, auf [0]. Wenn der Benutzer (Standort) auswählt, ändert die Funktion den Index zu [1] und durchsucht diese Spalte.

Ist das möglich? Jede Hilfe wäre willkommen.

const searchName = document.getElementById('searchName'); 
 
const searchLoc = document.getElementById('searchLoc'); 
 
custSelect.addEventListener('click',() => { 
 
    if (custSelect.value == 'custname') { 
 
    searchName.style.display = 'block'; 
 
    searchLoc.style.display = 'none'; 
 
    } else { 
 
    searchName.style.display = 'none'; 
 
    searchLoc.style.display = 'block'; 
 
    } 
 
}); 
 

 

 
// Search for customer, or search for location, index will change based on option selected. 
 
function tableSearch(id, index) { 
 
    // Declare variables 
 
    var filter, input, table, tr, td, i; 
 
    input = document.getElementById(id); 
 
    filter = input.value.toUpperCase(); 
 
    table = document.getElementById(id); 
 
    tr = table.getElementsByTagName('tr'); 
 

 
    // Loop through all table rows, and hide those who don't match the search query 
 
    for (i = 0; i < tr.length; i++) { 
 
    td = tr[i].getElementsByTagName("td")[0]; // index will change based on option selected. 
 
    if (td) { 
 
     if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
 
     tr[i].style.display = ""; 
 
     } else { 
 
     tr[i].style.display = "none"; 
 
     } 
 
    } 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Test</title> 
 
</head> 
 

 
<body> 
 
    <div id="custDiv"> 
 
    <div class="addBtns"> 
 
     <input id="searchName" onkeyup="tableSearch('searchName','custList'[0])" type="text" placeholder="search name" /> 
 
     <!-- this searches through the first index or [0] --> 
 
     <input id="searchLoc" onkeyup="tableSearch('searchLoc','custList'[1])" style="display: none;" type="text" placeholder="search location" /> 
 
     <!-- this searches through the second index or [1] --> 
 
     <div id="custSelectDiv" style="width: 175px; height: 35px; max-height: 35px; margin: 0 auto;"> 
 
     <select id="custSelect" style="position: absolute;"> 
 
      <option value="custname">name</option> <!-- if user selects this, the corresponding input is displayed, which changes the index to search through --> 
 
      <option value="location">location</option> <!-- if user selects this, the corresponding input is displayed, which changes the index to search through --> 
 
      </select> 
 
     </div> 
 
    </div> 
 
    <table id="custListTop" contenteditable="false"> 
 
     <tr> 
 
     <td style="border-top-left-radius: 5px;">Customers</td> 
 
     <td style="border-top-right-radius: 5px;">Main Location</td> 
 
     </tr> 
 
    </table> 
 
    <table id="custList" contenteditable="true"> 
 
     <tr> 
 
     <td>josh</td> 
 
     <td>hawkins</td> 
 
     </tr> 
 
     <tr> 
 
     <td>hanna</td> 
 
     <td>big sandy</td> 
 
     </tr> 
 
     <tr> 
 
     <td>bonne</td> 
 
     <td>big sandy</td> 
 
     </tr> 
 
     <tr> 
 
     <td>thomas</td> 
 
     <td>big sandy</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 

 
<script src="test.js"></script> 
 
</body> 
 

 
</html>

Quelle

2017-11-10 hannacreed

Vielleicht bin ich off topic, aber warum nicht in ein Array von Objekten suchen und die Tabelle neu zu zeichnen? Warum sollten Sie im DOM suchen? Es ist nur UI! – PhilMaGeo

Dies sollte man auf der Strecke

var table = document.getElementById('tab'), 
 
    col = document.getElementById('col'), 
 
    val = document.getElementById('val'); 
 
col.max = table.rows[0].cells.length - 1; 
 

 
function search() { 
 
    var regex = new RegExp(val.value || '', 'i'); 
 
    for (var i = table.rows.length; i-- > 1;) { 
 
    if (regex.test(table.rows[i].cells[+col.value].innerHTML)) { 
 
     table.rows[i].style.display = 'table-row'; 
 
    } else 
 
     table.rows[i].style.display = 'none'; 
 
    } 
 
}

table { 
 
    border-collapse: collapse; 
 
} 
 

 
table, 
 
th, 
 
td { 
 
    border: 1px solid; 
 
}

<label for="col">Column :</label> 
 
<input type="number" id="col" placeholder="column" onkeyup="search()" min="0" step="1" /> 
 
<br> 
 
<label for="val">Find :</label> 
 
<input type="text" id="val" placeholder="cell" onkeyup="search()" /> 
 
<table id="tab"> 
 
    <tr> 
 
    <th>Customers</th> 
 
    <th>Main Location</th> 
 
    </tr> 
 
    <tr> 
 
    <td>josh</td> 
 
    <td>hawkins</td> 
 
    </tr> 
 
    <tr> 
 
    <td>hanna</td> 
 
    <td>big sandy</td> 
 
    </tr> 
 
    <tr> 
 
    <td>bonne</td> 
 
    <td>big sandy</td> 
 
    </tr> 
 
    <tr> 
 
    <td>thomas</td> 
 
    <td>big sandy</td> 
 
    </tr> 
 
</table>

Quelle

2017-11-10 19:50:02 Shreevardhan

Ich mag das, aber ich versuche eine 'if' Anweisung zu verwenden, wenn (col.value == '1') {label.innerHTML = 'Suchname:'; }, aber dies ändert nicht die innereHTML – hannacreed

Ich denke, sie sind zwei simplier Möglichkeiten, um die Forschung zu tun:

einen Objekt-Array verwenden zu suchen, was Sie brauchen, reorganisiert es jede Forschung an und wieder macht Ihre html Tabelle jedes Mal, wenn sich die Tabelle ändert.

Oder verwenden Sie dataTable, die ein sehr einfaches Tool zum Sortieren der Tabelle ist.

Quelle

2017-11-10 19:40:32

JavaScript Suche Tabelle nach Index

Antwort

Verwandte Themen