사실 아직 마스터는 못 하지만 ... ㅎ
오늘 근무 중 Table 의 현재 Row index 를 가져와야 했는데...
쉬울 줄 알았더니 엉? 엥? 의 연속이었다 ㅜㅜㅋㅋㅋㅋㅋ
게다가 오랜만에 보는 innerHTML 도...
오늘 알아본 내용에 대해 짧게 써봐야겠다.
## 1. addRow
Table에 Row를 추가해주는 메소드이다.
onclick='addRow()'오늘 나는 버튼을 클릭할때마다, selectBox 안에 있는 내용을 Table 안에 Row로 추가 해줘야했다.
> HTML
<table id = "list"></table>
> JS
function addRow() {
const table = document.getElementById('list');
가장 먼저 해야할것은 row를 추가할 table에 id를 주는 것!
script 태그 안에서 해당 아이디로 table을 가져와 준다.
const newRow = table.insertRow();이후 newRow로 새로운 row를 생성해준다!
// cell 배열
const cell_arr = [];
// row에 cell(td) 생성
for(var i=0; i<5; i++){
cell_arr[i] = newRow.insertCell(i);
}나는 한 줄 안에 5개의 칸을 만들어주기 위해 for문을 사용했다.
cell_arr[0].innerText = 10;칸(td) 안에 내용을 채우고 싶다면 위와 같이 innerText를 사용하면 된다.
그러나! 단순 텍스트가 아닌 태그로 내용을 채우고 싶다면 innerHTML을 사용해야한다.
cell_arr[0].innerHTML = `<a href="javascript:void(0)" onclick="deleteRow(`+num+`)">삭제</a>`;
cell_arr[1].innerHTML = `<p value = "`+a+`">`+a+`</p>`;
}위와 같이 백틱 안에 원하는 태그를 작성해주면 된다!
## 2. deleteRow
다음으로는 deleteRow!
이미 작성되어 있는 Row를 삭제할 수 있는 메서드이다.
function deleteRow(index) {
const table = document.getElementById('fu_list');당연히 id 를 통해 table을 먼저 가져와야 하고,
const newRow = table.deleteRow(index);
}index 값을 통해 원하는 row를 삭제할 수 있다.
## 2-1. 원하는 row 삭제하기
내가 오늘 아주 잘 쓴 부분은 사실 이것!
선택된 row의 id를 통해 index 값을 가져와 해당 row를 삭제하는 것이다.
// 새로운 row
const newRow = table.insertRow();
newRow.className = "select"+arr[i];
newRow.setAttribute("className", "select"+arr[i]);나는 addRow를 할 때, 위와 같이 className을 통해 각 row 마다 모두 다른 숫자를 사용한 class = "select숫자" 를 붙여주었다.
Row 들의 index를 구분하기 위해!
var select = document.querySelector('.select'+num);
var index = select.rowIndex;다시 deleteRow로 돌아와, select 뒤에 원하는 숫자를 붙여 삭제 하고 싶은 index의 row를 삭제할 수 있었다!
``` 👽 아쉽게도 ,,, 오늘 작성한 코드는 모두 지워야하는 일이 발생했지만 ㅠㅋㅋㅋ 위 코드 뿐 아니라 for문 if문을 섞어 사용해보며 원하는 기능을 개발할 수 있었다! 나는 프론트엔드 개발을 지망했어서 js 만 사용해서 문제를 해결하려고 했는데, 백엔드를 위주로 하셨던 사수 분께서는 DB에서 처리할 생각을 먼저 하시는게 신기했다!
