Страница произвольно перезагружается
Собственно вот функции:
function deleteRows(tableId) { var table = document.getElementById(tableId); var inputs = table.getElementsByTagName("input"); var i = inputs.length; while (i--) { var input = inputs[i]; if (input.getAttribute("type") == "checkbox" && input.checked == true) { var tr = input.parentNode.parentNode; table.deleteRow(tr.rowIndex); } } } function appendRow(tableId) { var table = document.getElementById(tableId); var row = table.insertRow(-1); row.setAttribute("id", "row"+(table.rows.length-1)); var td1 = document.createElement("td"); var td2 = document.createElement("td"); var td3 = document.createElement("td"); var input = document.createElement("input"); input.setAttribute("type", "text"); var select = document.createElement("select"); var option1 = document.createElement("option"); option1.setAttribute("value", "_input_"); option1.setAttribute("selected", "selected"); option1.innerHTML = "input"; var option2 = document.createElement("option"); option2.setAttribute("value", "_textarea_"); option2.innerHTML = "textarea"; select.appendChild(option1); select.appendChild(option2); var checkbox = document.createElement("input"); checkbox.setAttribute("type", "checkbox"); td1.appendChild(input); td2.appendChild(select); td3.appendChild(checkbox); row.appendChild(td1); row.appendChild(td2); row.appendChild(td3); } а вот хтмл: <form action="" method="post" onsubmit="deleteRows('tab1');return false;"> <table id="tab1" class="sortable"> <thead> <tr> ... </tr> </thead> <tbody> <tr id="row1"> <td> <input id="_input_" name="_input_" type="text" value="Name11" /> </td> <td> <select id="type" name="type"> <option value="_input_" selected="selected">input</option> <option value="_textarea_">textarea</option> </select> </td> <td> <input type="checkbox"> </td> </tr> <tr id="row2"> <td> <input id="_input_" name="_input_" type="text" value="Name11" /> </td> <td> <select id="type" name="type"> <option value="_input_" selected="selected">input</option> <option value="_textarea_">textarea</option> </select> </td> <td> <input type="checkbox"> </td> </tr> </tbody> </table> <input type="submit" value="Delete"> </form> <a href="#" onclick="appendRow('tab1'); return false;">Append</a> Перезагружается, к примеру, когда удаляем одну из двух строк. Или после удаления последней созданной строки. Не подскажите в чем дело? |
Это связано с тем, что удаляя checkbox`ы, вы неявно изменяете «массив» inputs, уменьшая его длину. При попытке доступа к элементу по неверному индексу происходит ошибка Javascript и форма сабмитится, как если бы Javascript вообще был отключен. Решение — например, использовать не «живой» массив, возвращаемый методом getElementsByTagName, а обычный массив со ссылками на все input`ы.
function deleteRows(tableId) { var table = document.getElementById(tableId); var inputs0 = table.getElementsByTagName("input"); var i = inputs0.length; var inputs = new Array(); while (i--) inputs.push(inputs0[i]); i = inputs.length; while (i--) { var input = inputs[i]; if (input.getAttribute("type") == "checkbox" && input.checked == true) { var tr = input.parentNode.parentNode; table.deleteRow(tr.rowIndex); } } } Либо прямо в цикле вызывайте метод getElementsByTagName. |
О! Спасибо большое! Я бы еще долго мучался.
|
axon,
Вариант ... добавить проверку на наличе input в первоначальный вариант if (input&&input.getAttribute("type") == "checkbox" && input.checked == true) |
Часовой пояс GMT +3, время: 08:32. |