Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.02.2011, 15:59
Новичок на форуме
Отправить личное сообщение для axon Посмотреть профиль Найти все сообщения от axon
 
Регистрация: 23.02.2011
Сообщений: 3

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


Перезагружается, к примеру, когда удаляем одну из двух строк. Или после удаления последней созданной строки. Не подскажите в чем дело?
Ответить с цитированием
  #2 (permalink)  
Старый 23.02.2011, 16:38
Аватар для Amphiluke
   ☽
Отправить личное сообщение для Amphiluke Посмотреть профиль Найти все сообщения от Amphiluke
 
Регистрация: 07.01.2011
Сообщений: 254

Это связано с тем, что удаляя 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.
Ответить с цитированием
  #3 (permalink)  
Старый 23.02.2011, 16:49
Новичок на форуме
Отправить личное сообщение для axon Посмотреть профиль Найти все сообщения от axon
 
Регистрация: 23.02.2011
Сообщений: 3

О! Спасибо большое! Я бы еще долго мучался.
Ответить с цитированием
  #4 (permalink)  
Старый 24.02.2011, 08:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,272

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как определить что страница загружена не полностью? PAMAC Общие вопросы Javascript 2 22.02.2011 17:59
страница жутко глючит в IE bushstas Оффтопик 2 02.02.2011 22:38
Сломал всю голову.. Посмотрите спецы.. Не хочет работать страница в mozilla-firefox.. ProniK Ваши сайты и скрипты 1 02.06.2010 19:33
Перезагружается страница prog90 AJAX и COMET 12 05.08.2009 12:06
При первой загрузке сайта другая страница. XenOS Общие вопросы Javascript 2 15.12.2008 00:27