제가 동적필드를 생성하고 삭제하는 추가/삭제 버튼을 만들었는데 추가를 누르면 행이 잘 추가 되는데, 삭제버튼은 자바스크립트 코드가 적용이 안되어서요 .. !
var row = table.rows[i]; 여기 까지는 잘 나오는것 같은데
var chkbox = row.cells[0].childNodes[0]; -> 여기서부터 조금 이상한것 같아서요.. !
뭐가 문제 있는지 봐주실 수 있나요?
Copy
<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개 / 댓글 1개
채택된 답변
+20 포인트
2016-11-08 (화) 15:48:50
deleteRow() 메소드 안에
var chkbox = row.cells[0].childNodes[0];
-->
var chkbox = row.cells[0].childNodes[1];
근데 어지간하면 deleteRow() 메소드명은 다른 걸로 하시는 게 낫지 않을까 싶네요.
아무래도 이름이 중복이고 table.deleteRow(i); 이러니까 재귀 호출인 줄...
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.