자바스크립트 질문입니다
본문
제가 동적필드를 생성하고 삭제하는 추가/삭제 버튼을 만들었는데 추가를 누르면 행이 잘 추가 되는데, 삭제버튼은 자바스크립트 코드가 적용이 안되어서요 .. !
var row = table.rows[i]; 여기 까지는 잘 나오는것 같은데
var chkbox = row.cells[0].childNodes[0]; -> 여기서부터 조금 이상한것 같아서요.. !
뭐가 문제 있는지 봐주실 수 있나요?
<p id="adRow">
<input type="button" value="추가" onClick="addRow('dataTable')" class="button"/>
<input type="button" value="삭제" onClick="deleteRow('dataTable')" class="button"/>
</p>
<table id="dataTable" class="dataTable" border="1">
<tbody>
<tr><p>
<td>
<input type="checkbox" name="chk[]" checked="checked" />
</td>
<td>
<div>
<label>과일</label>
<select name="sub1[]" required>
<option value="">선택하세요</option>
<option value="1">사과</option>
<option value="2">수박</option>
</select>
</div>
</td>
<td>
<label>과정</label>
<select name="sub5[]" required>
<option value="">선택하세요</option>
<option value="표준">표준과정</option>
<option value="응용">응용과정</option>
</select>
</td>
</p></tr>
</tbody>
</table>
<script>
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i <colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) { // limit the user from removing all the fields
alert("Cannot Remove all the Passenger.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
</script>
답변 1
deleteRow() 메소드 안에
var chkbox = row.cells[0].childNodes[0];
-->
var chkbox = row.cells[0].childNodes[1];
근데 어지간하면 deleteRow() 메소드명은 다른 걸로 하시는 게 낫지 않을까 싶네요.
아무래도 이름이 중복이고 table.deleteRow(i); 이러니까 재귀 호출인 줄...
우와!!! 되었습니다 ! 감사드려요!!!ㅎㅎㅎㅎ
답변을 작성하시기 전에 로그인 해주세요.
