페이지가로드 될 때로드되는 html 테이블이 있고 각 열에 대한 드롭 다운이 있으며 드롭 다운에서 값을 선택하면 선택한 드롭 다운 값에 대해 테이블이 새로 고쳐 져야합니다. 그리고 html 테이블에 모든 데이터가 있으므로 서버 호출을 호출해서는 안됩니다. 이것에 대해 나에게 제안하십시오.
따라서 여기에서 수동으로 html을 구성하거나 다음 단계를 따를 수 있습니다.
또는이 jsfiddle에 설명 된대로 이것을 따를 수 있습니다.
HTML
<title>Filter Table</title>
<body>
<div class="optionsDiv">
Filter By Position
<select id="selectField">
<option value="All" selected>All</option>
<option value="Student">Student</option>
<option value="Assistant">Assistant</option>
<option value="Professor">Professor</option>
</select>
</div>
<table id="myTable">
<tr id="HeadRow">
<td>First Name</td>
<td>Last Name</td>
<td>Age</td>
<td>Position</td>
</tr>
<tr position="Student">
<td>John</td>
<td>John's Last name</td>
<td>25</td>
<td>Student</td>
</tr>
<tr position="Assistant">
<td>Timmy</td>
<td>Timmy's Last name</td>
<td>22</td>
<td>Assistant</td>
</tr>
<tr position="Professor">
<td>Billy</td>
<td>Billy's Last name</td>
<td>40</td>
<td>Professor</td>
</tr>
<tr position="Professor">
<td>Eddy</td>
<td>Eddy's Last name</td>
<td>35</td>
<td>Professor</td>
</tr>
<tr position="Professor">
<td>Emma</td>
<td>Emma's Last name</td>
<td>38</td>
<td>Professor</td>
</tr>
<tr position="Student">
<td>Emily</td>
<td>Emily's Last name</td>
<td>20</td>
<td>Student</td>
</tr>
<tr position="Assistant">
<td>Jack</td>
<td>Jack's Last name</td>
<td>30</td>
<td>Assistant</td>
</tr>
<tr position="Student">
<td>Robert</td>
<td>Robert's Last name</td>
<td>20</td>
<td>Student</td>
</tr>
<tr position="Assistant">
<td>Danny</td>
<td>Danny's Last name</td>
<td>37</td>
<td>Assistant</td>
</tr>
<tr position="Professor">
<td>Erick</td>
<td>Erick's Last name</td>
<td>42</td>
<td>Professor</td>
</tr>
</table>
</body>
JQuery
$(document).ready(function() {
function addRemoveClass(theRows) {
theRows.removeClass("odd even");
theRows.filter(":odd").addClass("odd");
theRows.filter(":even").addClass("even");
}
var rows = $("table#myTable tr:not(:first-child)");
addRemoveClass(rows);
$("#selectField").on("change", function() {
var selected = this.value;
if (selected != "All") {
rows.filter("[position=" + selected + "]").show();
rows.not("[position=" + selected + "]").hide();
var visibleRows = rows.filter("[position=" + selected + "]");
addRemoveClass(visibleRows);
} else {
rows.show();
addRemoveClass(rows);
}
});
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다