테이블 내 목록 출력
var saram = {key: value, key: value, ...}
객체를 선언하여 데이터를 저장한다.
key를 사용하여 알맞은 곳에 적절히 사용하면 끝!
var saram = [
{key: value, key: value, ...},
{key: value, key: value, ...},
{key: value, key: value, ...} ];여러 데이터를 넣어 사용하고 싶을 땐 객체를 Array에 담아준다.
<!-- css 적용 우선순위 inline > internal > external -->
<body>
<div class="container">
<h1>사원 목록</h1>
<table class="table table-bordered table-hover">
<thead>
<tr align="center">
<th><input type="checkbox" class = "allCheck"></th>
<th>번호</th>
<th>사진</th>
<th>사원명</th>
<th>부서</th>
<th>직급</th>
<th>수정</th>
<th>삭제</th>
</tr>
</thead>
<tbody id="rows_area"></tbody>
</table>
</div>
<script>
var saram = {
"no":1,
"img":"images/noimage.jpg",
"name":"홍길동",
"dept":"관리부",
"position":"과장"
}
var tmpData = `
<tr align="center">
<td><input type="checkbox" class = "allCheck" /></td>
<td>${saram.no}</td>
<td><img sre="${saram.img}" width="100px" height="100px" /></td>
<td>${saram.name}</td>
<td>${saram.dept}</td>
<td>${saram.position}</td>
<td><input type="button" value="수정"/> </td>
<td><input type="button" value="삭제"/></td>
</tr>
`;
document.querySelector('#rows_area').innerHTML = tmpData;
</script>
</body>
</html>
<script type="text/template" id="rowTemp">
<tr align="center">
<td><input type="checkbox" class = "allCheck" /></td>
<td>${saram.no}</td>
<td><img sre="${saram.img}" width="100px" height="100px" /></td>
<td>${saram.name}</td>
<td>${saram.dept}</td>
<td>${saram.position}</td>
<td><input type="button" value="수정"/> </td>
<td><input type="button" value="삭제"/></td>
</tr>
</script>템플릿을 활용하는 방법도 있는데 이건 나중에...
검색 기능 구현
1. 검색 버튼(reserchBtn) 클릭 시, 검색 창(reserch)에 입력된 검색어을 읽어온다.
// 검색 기능 구현
var reserchBtn = document.getElementById("reserchBtn"); // 검색 버튼
var reserch = document.getElementById("reserch"); // 입력된 검색어
// 검색 버튼 클릭 시 이벤트
reserchBtn.onclick = function(event) {
console.log(reserch.value);
}
reserch.value의 값이 검색 창에 입력된 값임을 확인했다.
2. 입력 값과 같은 요소들을 데이터 Array에서 찾는다.
var reserchSarams = [];
기존 데이터와 비교하여 검색어와 일치하는 데이터들을 담을 array를 선언한다.
모든 데이터들을 비교하기 위해 for문을 사용한다.
입력된 값과 일치하는 값이 있는지 || 연산자를 통해 모두 확인한다.
if문이 true라면 위에 선언한 Array에 해당 정보를 push한다.
// 기존 데이터와 비교하여 검색어와 일치하는 데이터들을 담을 array
var reserchSarams = [];
for(var i =0; i < saramaList.length; i++) {
// saramaList 중에 검색어와 같은 데이터가 있으면 eserchSaram에 담음
if( saramaList[i].name == reserch.value || saramaList[i].no == reserch.value
|| saramaList[i].dept == reserch.value || saramaList[i].position == reserch.value ){
reserchSaram.push(saramaList[i]);
}
}3. 그 결과를 목록에 출력한다.
var newHtml = "";
for(var i=0; i<newSaramList.length; i++) {
var saram = newSaramList[i];
var tmpData = `<tr align="center">
<td><input type="checkbox" class="check"></td>
<td>${saram.no}</td>
<td><img src="${saram.img}" width="100"/></td>
<td>${saram.name}</td>
<td>${saram.dept}</td>
<td>${saram.position}</td>
<td><input type="button" value="수정"></td>
<td><input type="button" value="삭제"></td>
</tr>`;
newHtml += tmpData;
}
document.querySelector('#rows_area').innerHTML = newHtml;전체 코드
// 검색 기능 구현
var reserchBtn = document.getElementById("reserchBtn"); // 검색 버튼
var reserch = document.getElementById("reserch"); // 입력된 검색어
// 검색 버튼 클릭 시 이벤트
reserchBtn.onclick = function(event) {
// 검색된 결과를 담을 곳
var reserchHtml = "";
// 기존 데이터와 비교하여 검색어와 일치하는 데이터들을 담을 array
var reserchSaram = [];
for(var i =0; i < saramList.length; i++) {
// saramaList 중에 검색어와 같은 데이터가 있으면 eserchSaram에 담음
if( saramList[i].name == reserch.value || saramList[i].no == reserch.value
|| saramList[i].dept == reserch.value || saramList[i].position == reserch.value ){
reserchSaram.push(saramList[i]);
}
}
var reserchHtml = "";
for(var i=0; i<reserchSaram.length; i++) {
var saram = reserchSaram[i];
var tmpData = `<tr align="center">
<td><input type="checkbox" class="check"></td>
<td>${saram.no}</td>
<td><img src="${saram.img}" width="100"/></td>
<td>${saram.name}</td>
<td>${saram.dept}</td>
<td>${saram.position}</td>
<td><input type="button" value="수정"></td>
<td><input type="button" value="삭제"></td>
</tr>`;
reserchHtml += tmpData;
}
document.querySelector('#rows_area').innerHTML = reserchHtml;
}실행 결과
검색 추가 기능 구현
입력된 단어가 포함된 모든 데이터 출력
indexOf( ) 함수
string.indexOf(searchValue[, position])
- 문자열에서 특정 문자열을 찾기 위해 사용됨
var str ="asas";
var result = str.indexOf("sa");
// 결과: 1- 찾는 문자열이 있으면 검색된 문자열이 첫번째로 나타나는 위치 index 리턴
- 찾는 문자열이 없으면 -1 리턴
- 대소문자 구분
(saramList[i].name).indexOf(reserch.value)reserch.value - 입력된 값의 문자열
saramList[i].name - 사람리스트의 이름
for문을 통해 saramList 데이터의 이름들이 입력된 값의 문자열이 있는지 비교할 수 있다.
입력된 문자열과 같은 값이 있다면 -1 외의 다른 값을 리턴한다.
saramList[i].name).indexOf(reserch.value) != -1
->입력딘 문자열을 가진 이름만 if문 조건에 true가 되어 reserchSaram에 추가된다.
// 기존 데이터와 비교하여 검색어와 일치하는 데이터들을 담을 array
var reserchSaram = [];
for(var i =0; i < saramList.length; i++) {
// saramaList 중에 검색어와 같은 데이터가 있으면 reserchSaram에 담음
if((saramList[i].name).indexOf(reserch.value) != -1 ){ // 편의상 이제 이름만 검색 가능하도록 바꿈
reserchSaram.push(saramList[i]);
}
}
실행결과
검색과 동시에 결과 출력
검색과 동시에 결과를 보여주려면 입력창에 입력할 때 마다 검색부분을 실행하면 된다.
키보드 이벤트
1) onkeydown - 사용자가 키보드의 키를 눌렀을 때
2) onkeyup - 사용자가 키보드의 키를 눌렀다가 땠을 때
3) onkeyPress - 사용자가 키보드의 키를 눌렀을 때
검색이 검색 버튼을 눌렀을 때와 키보드 이벤트가 발생하였을 때 둘 다 실행되어야함으로 검색 부분을 함수로 만들어줬다.
// searchFn
var searchFn = function(event) {
// 검색된 결과를 담을 곳
var reserchHtml = "";
// 기존 데이터와 비교하여 검색어와 일치하는 데이터들을 담을 array
var reserchSaram = [];
for(var i =0; i < saramList.length; i++) {
// saramaList 중에 검색어와 같은 데이터가 있으면 reserchSaram에 담음
if((saramList[i].name).indexOf(reserch.value) != -1 ){
reserchSaram.push(saramList[i]);
}
}
var reserchHtml = "";
for(var i=0; i<reserchSaram.length; i++) {
var saram = reserchSaram[i];
var tmpData = `<tr align="center">
<td><input type="checkbox" class="check"></td>
<td>${saram.no}</td>
<td><img src="${saram.img}" width="100"/></td>
<td>${saram.name}</td>
<td>${saram.dept}</td>
<td>${saram.position}</td>
<td><input type="button" value="수정"></td>
<td><input type="button" value="삭제"></td>
</tr>`;
reserchHtml += tmpData;
}
document.querySelector('#rows_area').innerHTML = reserchHtml;
}
reserch.onkeyup = searchFn;
-> 입력 창에 키보드 이벤트 발생 시 serchFn 함수 호출
reserchBtn.onclick =searchFn;
-> 검색 버튼에 onclick 이벤트 발생 시 serchFn 함수 호출
- 실행결과
