Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: для новичков > удаление стро(tr) в таблице


Автор: zammar 23.7.2009, 12:57
Нужно удалить все строки в таблице кроме первой и последней.
Не получается так сделать. Удаляется только половина строк.
Подскажите где у меня ошибка. плз.

Код


                function afterLoadDeleteResult()
                {
                    var table = document.getElementById("pl_polls_result_table");

                    var count = table.rows.length;

                    for (var i = 0; i < count; i++)
                    {

                        if(table.rows[i].id != "first_tr" && table.rows[i].id != "last_tr")
                        {
                            var curRow = document.getElementById(table.rows[i].id);
                            curRow.removeNode(true);

                        }
                    }
        }




Код

<table cellspacing="0" cellpadding="0" border="1" id="pl_polls_result_table" style="width: 100%;">
    <tr id="first_tr">
        <th align="center" class="header">IP</th>
        <th align="center" class="header">Дата и время</th>
        <th align="center" class="header">Текст результата голосования</th>
        <th class="header"> </th>                
        <th class="header"> </th>            
    </tr>
    <tr class="odd" id="821">
        <td id="ip_821" style="text-align: center; width: 40px;">123,123,123,123</td>
        <td id="date_821" style="text-align: center; width: 40px;">15.03.1973 03:50</td>
        <td id="text_821" style="text-align: center; width: 40px;">ывапываепва</td>        
        <td style="text-align: center; width: 40px;">                    
ssssssssssssssss
        </td>
        <td style="text-align: center; width: 40px;">
sssssssssss
        </td>
    </tr>
    <tr class="even" id="820">
        <td id="ip_820" style="text-align: center; width: 40px;">123,123,123,123</td>
        <td id="date_820" style="text-align: center; width: 40px;">15.03.1973 03:50</td>
        <td id="text_820" style="text-align: center; width: 40px;">вапвапвапв</td>
        <td style="text-align: center; width: 40px;">                        
sssssssssssssssssss
        </td>                    
        <td style="text-align: center; width: 40px;">    
sssssssssssssssss
        </td>    
    </tr>
    <tr class="odd" id="819">
        <td id="ip_819" style="text-align: center; width: 40px;">123,123,123,123</td>
        <td id="date_819" style="text-align: center; width: 40px;">15.03.1973 03:50</td>
        <td id="text_819" style="text-align: center; width: 40px;">авпывапывап</td>
        <td style="text-align: center; width: 40px;">
sssssssssssssssss
        </td>
        <td style="text-align: center; width: 40px;">
sssssssss
        </td>
    </tr>
    <tr class="even" id="818">
        <td id="ip_818" style="text-align: center; width: 40px;">123,123,123,123</td>
        <td id="date_818" style="text-align: center; width: 40px;">15.03.1973 03:50</td>
        <td id="text_818" style="text-align: center; width: 40px;">вапвыапвы</td>
        <td style="text-align: center; width: 40px;">
sssssssssssssss
        </td>
        <td style="text-align: center; width: 40px;">
sdssssssssssssss
        </td>
    </tr>
    <tr class="odd" id="817">
        <td id="ip_817" style="text-align: center; width: 40px;">123,123,123,123</td>
        <td id="date_817" style="text-align: center; width: 40px;">15.03.1973 03:50</td>
        <td id="text_817" style="text-align: center; width: 40px;">вапывап</td>
        <td style="text-align: center; width: 40px;">
SSSSSSSSSSSSSSSSSS
        </td>
        <td style="text-align: center; width: 40px;">
dddddddddd
        </td>
    </tr>
    <tr class="odd" id="last_tr">
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>            
        <td></td>
    </tr>
</table>

<br />

<a href="#" onClick="afterLoadDeleteResult();">dgkdsgdfg</a>

Автор: InvalidProperty 23.7.2009, 13:24
если кроме первой и последней, то почему бы не попробовать цикл
Код

for (var i = 1; i < count - 1; i++)

тогда и от условия внутри цикла избавишься

Автор: zammar 23.7.2009, 13:32
Спасбо за оптимизацию, но суть вопроса не в этом. А том что почему-то не удалются все строки сразу. Не пойму почему? smile 

Автор: underW 23.7.2009, 14:57
сори, но что значит:
Код

не удалются все строки сразу

строки удаляются в цикле по одной. 

Автор: zammar 23.7.2009, 15:18
Не точно описал. 
Просто когда я удалял по одной строке (код здесь не преведен) при нажатии на определенную кнопку, то строка удляется нормально, а когда в цикле то не все удаляются.

Вообщем вот работающий код. Не знаю как и почему не получалось раньше и получается теперь. Использовал метод тыка. smile 
Оставляю тему открытой может кто объяснит почему выше приведенный код не работает?

Код


                function afterLoadDeleteResult()
                {
                        var table = document.getElementById("pl_polls_result_table");
                        table = table.tBodies[0];

                        var count = table.rows.length;
                        var t = count-1;

                        while (count > 2)
                        {
                            if(table.rows[t].id != "first_tr" && table.rows[t].id != "last_tr")
                            {
                                var curRow = document.getElementById(table.rows[t].id);
                                table.removeChild(curRow);
                            }

                            t--;
                        }
                }



Код

<table cellspacing="0" cellpadding="0" border="1" id="pl_polls_result_table" style="width: 100%;">
    <tr id="first_tr">
        <th align="center" class="header">IP</th>
        <th align="center" class="header">Дата и время</th>
        <th align="center" class="header">Текст результата голосования</th>
        <th class="header"> </th>                
        <th class="header"> </th>            
    </tr>
    <tr class="odd" id="821">
        <td id="ip_821" style="text-align: center; width: 40px;">123,123,123,123</td>
        <td id="date_821" style="text-align: center; width: 40px;">15.03.1973 03:50</td>
        <td id="text_821" style="text-align: center; width: 40px;">ывапываепва</td>        
        <td style="text-align: center; width: 40px;">                    
ssssssssssssssss
        </td>
        <td style="text-align: center; width: 40px;">
sssssssssss
        </td>
    </tr>
    <tr class="even" id="820">
        <td id="ip_820" style="text-align: center; width: 40px;">123,123,123,123</td>
        <td id="date_820" style="text-align: center; width: 40px;">15.03.1973 03:50</td>
        <td id="text_820" style="text-align: center; width: 40px;">вапвапвапв</td>
        <td style="text-align: center; width: 40px;">                        
sssssssssssssssssss
        </td>                    
        <td style="text-align: center; width: 40px;">    
sssssssssssssssss
        </td>    
    </tr>
    <tr class="odd" id="819">
        <td id="ip_819" style="text-align: center; width: 40px;">123,123,123,123</td>
        <td id="date_819" style="text-align: center; width: 40px;">15.03.1973 03:50</td>
        <td id="text_819" style="text-align: center; width: 40px;">авпывапывап</td>
        <td style="text-align: center; width: 40px;">
sssssssssssssssss
        </td>
        <td style="text-align: center; width: 40px;">
sssssssss
        </td>
    </tr>
    <tr class="even" id="818">
        <td id="ip_818" style="text-align: center; width: 40px;">123,123,123,123</td>
        <td id="date_818" style="text-align: center; width: 40px;">15.03.1973 03:50</td>
        <td id="text_818" style="text-align: center; width: 40px;">вапвыапвы</td>
        <td style="text-align: center; width: 40px;">
sssssssssssssss
        </td>
        <td style="text-align: center; width: 40px;">
sdssssssssssssss
        </td>
    </tr>
    <tr class="odd" id="817">
        <td id="ip_817" style="text-align: center; width: 40px;">123,123,123,123</td>
        <td id="date_817" style="text-align: center; width: 40px;">15.03.1973 03:50</td>
        <td id="text_817" style="text-align: center; width: 40px;">вапывап</td>
        <td style="text-align: center; width: 40px;">
SSSSSSSSSSSSSSSSSS
        </td>
        <td style="text-align: center; width: 40px;">
dddddddddd
        </td>
    </tr>
    <tr class="odd" id="last_tr">
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>            
        <td></td>
    </tr>
</table>

<br />

<a href="#" onClick="afterLoadDeleteResult();">dgkdsgdfg</a>

Автор: InvalidProperty 23.7.2009, 15:39
а я не знаю, почему твой нынешний код работает нормально. Это, видимо, фишка конкретного браузера
Код

var count = table.rows.length;
...
while (count > 2)
{
 // тут ничего про count нет
}

совсем другое дело, если бы ты написал
Код

function afterLoadDeleteResult()
{
 var table = document.getElementById("pl_polls_result_table");
 table = table.tBodies[0];
 while(table.rows[1].id != "last_tr")
 {  
  var curRow = document.getElementById(table.rows[1].id);
  table.removeChild(curRow);
 }
}

код не проверял, но, с первого взгляда, должен работать правильно.

немного попытаюсь объяснить, почему твой первый код мог не работать:
если браузер обрабатывает список нодов также, как c++ обрабатывает STL vector, например, то представь себе следующую ситуацию:
ты в цикле пробегаешь, допустим, 10 элементов, второй удаляешь, далее следует какой? пральна - 3ий, а 3ий в это время уже на втором месте. К тому же совсем не этично пробегать именно for(;i < count;), ибо count изменится при первом же удалении, а ты так и будешь ждать выполнения условия. Для этих целей лучше всего while использовать

Автор: zammar 23.7.2009, 15:59
Эврика!
Точно, у меня строки через один и удалялись smile 
InvalidProperty, при много благодарен!!!! smile 

Автор: InvalidProperty 23.7.2009, 16:04
zammar, рад, что помог, комрад  smile

Добавлено через 1 минуту и 33 секунды
если тема решена, пометь галочкой, чтобы другие тоже могли порадоваться твоему счастью

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)