자바 스크립트로 색인을 검색하십시오.

여러 개의 열이있는 표가 있습니다.이 질문에 대해서는 두 개의 열만 만들었습니다. 사용자가 선택할 수있는 옵션에 따라 색인을 통해 열을 검색 할 수 있기를 바랍니다. . 작업 코드가 있지만 검색 옵션을 변경하려면 각 입력에 대해 함수를 복사해야했습니다.자바 스크립트로 색인을 검색하십시오.

색인으로 어떻게 검색합니까? 사용자가 (name)과 같은 옵션을 선택하면 javascript 함수는 검색 할 색인을 [0]으로 변경합니다. 사용자가 (위치)를 선택하면 함수는 인덱스를 [1]로 변경하고 해당 열을 검색합니다.

이것이 가능합니까? 어떤 도움을 주시면 감사하겠습니다.

, 당신이 필요로 검색 할 객체 배열을 사용하여 각 연구에서 그것을 재구성하고 HTML을 다시합니다

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>

출처

2017-11-10 hannacreed

어쩌면 내가 주제와이야 그런데 왜 당신은 객체의 배열로 검색하고 테이블을 다시 그리기하지 않는 궤도에 도착해야합니까? 왜 DOM에서 검색해야합니까? 그것은 단지 UI입니다! – PhilMaGeo

이 당신은

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>

출처

2017-11-10 19:50:02 Shreevardhan

나는 이것을 좋아하지만 if (col.value == '1') {label.innerHTML = 'Search Name :'; }하지만 내부 HTML은 변경되지 않습니다. – hannacreed

나는 그들이 그 연구를 두 더 간단 방법이 생각 테이블이 바뀔 때마다 테이블.

dataTable을 사용하거나 테이블을 정렬하는 매우 간단한 도구입니다.

출처

2017-11-10 19:40:32

자바 스크립트로 색인을 검색하십시오.

답변

관련 문제