JavaScript - удаление строк из таблиц. Часть 1

JavaScript - удаление строк из таблиц. Часть 1 – клиентская

Март 9, 2006

Я начинаю цикл заметок, посвященных AJAX. Удаление строк из таблиц – это простой и удобный способ “прикручивания” аякса к любому сайту, где есть таблицы, генерируемые из БД. А это в свою очередь сказывается на удобстве интерфейса и особенно на скорости его работы. Первая часть – клиентская – расскажет как реализовать удаление строк средствами DOM.

Сначала сделаем таблицу с id, в одной из колонок которой размещаются чекбоксы.Каждой строке из <tbody> присвоим id: <tr id="row36">, а соответствующим чекбоксам – значения: <input type="checkbox" value="36" name="del_me[]" /> Таблицу помещаем в форму, и функцию удаления (delrows) вызываем при ее submit’е. Аргумент функции – id таблицы. return false – для того, чтоб страничка не перезагружалась.

HTML:

<form action="" method="post"
      onsubmit="delrows('tab1');return false;">
<table id="tab1" class="sortable">
    <thead>
        <tr>
            ...
        </tr>
    </thead>
    <tbody>
        <tr id="row1">
            <td> ... </td>
            <td> ... </td>
            <td>
                <input type="checkbox" value="1" name="del_me[]" />
            </td>
        </tr>
            ...
    </tbody>
</table>
<input type="submit" value="Delete" />
</form>

Теперь добавим JavaScript:

var d = document;

function delrows(tableId)
{
    var arr_del_me = d.getElementsByName('del_me[]');
    var len = arr_del_me.length;
    var tab = d.getElementById(tableId);
    var tb = tab.getElementsByTagName('TBODY')[0];

    var chds = new Array(len);
    var ids = new Array(len);

    for(var i=0; i&lt;len; i++)
    {
        chds[i] = arr_del_me[i].checked;
        ids[i] = arr_del_me[i].value;
    }

    for(var i=0; i&lt;len; i++)
        if(chds[i])
            tb.removeChild(d.getElementById("row"+ids[i]));
}

Пример здесь

Комментарии (9) на “JavaScript - удаление строк из таблиц. Часть 1 – клиентская”

~Bear'Z Blog~:
Март 27th, 2006 в 5:22 am
Неплохо, совсем для тупых написано, типа меня . Уже на этой неделе у меня должно появится что-то типа “hello word!” А потом буду писать Fixed Ratio Calculator для риск-менеджеров. Спасибо.
CB’s blog » Архив блога » JavaScript - удаление строк из таблиц. Часть 2 – AJAX:
Март 30th, 2006 в 2:22 pm
[…] Блог « JavaScript - удаление строк из таблиц. Часть 1 – клиентская […]
vflash:
Апрель 5th, 2006 в 6:46 pm
продолжу твой пример
если добавить режим добавления строк то можно организовать скролиг (те прокрутку), вставляем в верху строку а снизу удоляем, данные для вставки загружаем по средством аякс в виде xml при помоши xsl преобразуем в типа

…..

далие GetElementById(’tr’)
получим nodelist, а вот каждое элемент этого списка и есть то что вставляем
я добился эфекта прокрутки только на браузерах опера и FF а вот на IE я забил потому как он сильно медленный и для его я пока нечего не предумал

http://forum.mozilla.ru/viewtopic.php?id=6748
тут я задавал вопросы когда только начел реализовывать скрипт , сейчас я его сильно обработал на скоростях 3-1.5кб/с не чувствуются задержки при прокручивании
если интересует кину свежий вареант
svoloshyn:
Апрель 6th, 2006 в 9:48 am
Интересует. Кинь на мыло если есть чтото цельное, рабочее и несекретное. Кстати у меня есть все и для Аякс-добавления строк, думаю написать скоро еще и про это.

З.Ы. Для ИЕ по-любому нужно чтото делать (нравится нам это или нет).
Nat:
Апрель 11th, 2006 в 11:13 am
а если таблица-БД MySql, как можно напротив каждого из ее полей вывести checkbox? Т.е. мы отмечаем какие строки из таблицы надо удалить.

svoloshyn:
Апрель 11th, 2006 в 11:19 am

Может как-то так?

function genVysnTable()
{
  if(isset($GLOBALS['result']))
    while($row = $GLOBALS['result']->fetch())
    {
      $id = $row['id_vysn'];
      $name = prepare2htm($row['name']);
      $num = prepare2htm($row['num']);
      $date = prepare2htm($row['move_date']);

      if($GLOBALS['write_access'])
      {
        if($is_del)
          $delete = '<input type="checkbox" value="'.$id.'" name="del_me[]" />';
        else
          $delete = '-';
      }

      echo '<tr id="r'.$id.'">';
      echo '<td class="t_v_num">'.$num.'</td>';
      echo '<td class="t_v_date">'.$date.'</td>';
      echo '<td class="t_v_name">'.$name.'</td>';
      echo '<td class="t_v_delete_unsort">'.$delete.'</td>';
      echo '</tr>';
      echo "n";
    }
}

CB’s blog » Архив блога » Выбираем столбцы таблицы для отображения:
Ноябрь 19th, 2006 в 8:43 pm
[…] Удаление строк из таблиц. […]
vflash:
Ноябрь 29th, 2006 в 7:22 pm
на счет чегонибудь рабочего, выложил на сайте http://vflash.ru
Там кстати и для IE есть решение так сказать с пылу с жару
Динамическое удаление и добавление строк и столбцов в таблице на JavaScript | /var/log/life.log:
Октябрь 15th, 2008 в 3:04 am
[…] Когда начал писать скрипт для создания создания шаблонов для вышивки, я даже на знал как он будет выглядеть и что делать. Решив всё делать на JavaScript, начал искать как удалить строки из таблицы, и нашёл вполне вменяемый “мануал” http://sudoku.org.ua/rus/blog/2006/03/09/deltablerows1/ . Только там удалялись лишь строки и по id, дял меня id били лишними т.к. удалял я строки снизу, и мне также нужно было не только удаление строк, но и удаление столбцов а так же их динамическое добавление. Вот что получилось: сама таблица <table id="canvas"> … </table> […]

CB's blog

JavaScript - удаление строк из таблиц. Часть 1 – клиентская

Комментарии (9) на “JavaScript - удаление строк из таблиц. Часть 1 – клиентская”

Добавить комментарий