Страница произвольно перезагружается

[axon]

Собственно вот функции:

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]

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

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

[рони]

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