Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Страница произвольно перезагружается (https://javascript.ru/forum/events/15352-stranica-proizvolno-perezagruzhaetsya.html)

axon 23.02.2011 15:59

Страница произвольно перезагружается
 
Собственно вот функции:
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>


Перезагружается, к примеру, когда удаляем одну из двух строк. Или после удаления последней созданной строки. Не подскажите в чем дело?

Amphiluke 23.02.2011 16:38

Это связано с тем, что удаляя 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 23.02.2011 16:49

О! Спасибо большое! Я бы еще долго мучался.

рони 24.02.2011 08:47

axon,
Вариант ... добавить проверку на наличе input в первоначальный вариант
if (input&&input.getAttribute("type") == "checkbox" && input.checked == true)


Часовой пояс GMT +3, время: 01:22.