728x90
반응형
Javascript - 표 검색하기 ( 필터링 Filter )
<!DOCTYPE html>
<html>
<head>
<title>과일 가격</title>
<meta charset="utf-8">
</head>
<body>
<table id="myTable">
<tr>
<th>항목</th>
<th>가격</th>
</tr>
<tr>
<td>사과</td>
<td>2,000원</td>
</tr>
<tr>
<td>바나나</td>
<td>1,500원</td>
</tr>
</table>
<script>
function showTable() {
var fruitArray = document.getElementById("myTable_textarea").value.split("\n");
var table = document.getElementById("myTable");
var tableArray = [];
var found = false;
// 테이블을 배열로 저장
for (var i = 1; i < table.rows.length; i++) {
var rowArray = [];
rowArray.push(table.rows[i].cells[0].innerHTML);
rowArray.push(table.rows[i].cells[1].innerHTML);
tableArray.push(rowArray);
}
// 검색 결과가 있는 배열 만들기
var output = "<table>";
output += "<tr><th>항목</th><th>가격</th></tr>";
var searchArray = [];
for (var i = 0; i < fruitArray.length; i++) {
found = false;
for (var j = 0; j < tableArray.length; j++) {
if (tableArray[j][0] === fruitArray[i]) {
searchArray.push(tableArray[j]);
output += "<tr><td>" + fruitArray[i] + "</td><td>" + tableArray[j][1] + "</td></tr>";
found = true;
}
}
if(found == false){
output += "<tr><td>" + fruitArray[i] + "</td><td></td></tr>";
}
}
output += "</table>";
document.getElementById("output").innerHTML = output;
}
</script>
</body>
</html>
728x90
반응형
'Programing (프로그래밍)' 카테고리의 다른 글
| 프로그래밍 - 오토핫키 AutoHotKey 한글패치 ( 매크로 / Macro / 한글화 / 언어 / Language ) (0) | 2019.01.04 |
|---|