Выбор селекторами строки и столбца таблицы

@crazymActep · Регистрация: 21.03.2014

Студворк — интернет-сервис помощи студентам

Приветствую!

Совсем недавно изучаю JQ, и вот такая задача:
по клику кнопок (X) должны удаялтся соотвествующий ряд или колонка, с методом remove() всё понятно, удаление строки тоже реализовал, а вот какими цепочками селекторов реализвать удаление(считай выбор) целой колонки таблицы никак допреть не могу

помготе плиз
сркрин:
Название: e13a73f2a1370027d9be90b21295cec9.jpg
Просмотров: 227

Размер: 21.2 Кб

Название: e13a73f2a1370027d9be90b21295cec9.jpg
Просмотров: 227

Размер: 21.2 Кб

код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<table border="1" cellspacing="0" cellpadding="2" style="background-color: #C4C4C4" />
<tr>
    <td><input class="col_DEL" type="button" value="X"/></td>
    <td><input class="col_DEL" type="button" value="X"/></td>
    <td><input class="col_DEL" type="button" value="X"/></td>
    <td><input class="col_DEL" type="button" value="X"/></td>
    <td><input class="col_DEL" type="button" value="X"/></td>
    <td><input class="col_DEL" type="button" value="X"/></td>
    <td></td>
</tr>
<tr>
    <td>01</td>
    <td>02</td>
    <td>03</td>
    <td>04</td>
    <td>05</td>
    <td>06</td>
    <td><input class="row_DEL" type="button" value="X"/></td>
</tr>
<tr>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
    <td>15</td>
    <td>16</td>
    <td><input class="row_DEL" type="button" value="X"/></td>
</tr>
<tr>
    <td>21</td>
    <td>22</td>
    <td>23</td>
    <td>24</td>
    <td>25</td>
    <td>26</td>
    <td><input class="row_DEL" type="button" value="X"/></td>
</tr>
<tr>
    <td>31</td>
    <td>32</td>
    <td>33</td>
    <td>34</td>
    <td>35</td>
    <td>36</td>
    <td><input class="row_DEL" type="button" value="X"/></td>
</tr>
<tr>
    <td>41</td>
    <td>42</td>
    <td>43</td>
    <td>44</td>
    <td>45</td>
    <td>46</td>
    <td><input class="row_DEL" type="button" value="X"/></td>
</tr>
<tr>
    <td>51</td>
    <td>52</td>
    <td>53</td>
    <td>54</td>
    <td>55</td>
    <td>56</td>
    <td><input class="row_DEL" type="button" value="X"/></td>
</tr>
<tr>
    <td>61</td>
    <td>62</td>
    <td>63</td>
    <td>64</td>
    <td>65</td>
    <td>66</td>
    <td><input class="row_DEL" type="button" value="X"/></td>
</tr>
<tr>
    <td>71</td>
    <td>72</td>
    <td>73</td>
    <td>74</td>
    <td>75</td>
    <td>76</td>
    <td><input class="row_DEL" type="button" value="X"/></td>
</tr>
</table>

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

JavaScript
1
2
3
$(".row_DEL").click(function(){
         $(this).parent().parent().remove();                                 
});

а с удалениями колонок беда, никак родить не могу

Комментарий модератора

Прикрепляйте файлы и изображения к сообщениям.
https://www.cyberforum.ru/abou... post594251

@Lazy_Den · 21.03.2014, 23:20

Пример тестируем тут.

JavaScript
1
2
3
4
5
6
7
8
9
$('.row_DEL').on('click', function(){
    $(this).closest('tr').remove();
});
$('.col_DEL').on('click', function(){
    var colIndex = $(this).index('.col_DEL');
    $('tr').each(function(){
        $('td:eq(' + colIndex + ')', this).remove();
    });
});

@doozy · 21.03.2014, 23:41

Сообщение от Lazy_Den

'td:eq(' + colIndex + ')'

А что эта часть означает?

Добавлено через 4 минуты
Выбор элемента с индексом... Что за плюсы перед и после colIndex?

@Lazy_Den · 21.03.2014, 23:48

Сообщение от doozy

А что эта часть означает?

Тогда очень странно, что у вас не возник вопрос по поводу пятой строки. Это означает, что мы подставляем индекс который вычислили у кнопки "удаления колонки", по которой был клик.

Добавлено через 1 минуту

Сообщение от doozy

Что за плюсы перед и после colIndex?

Это конкатенация.

@crazymActep · 21.03.2014, 23:58 **[ТС]**

ого! спасибо за ваш такой быстрый ответ! вот что значит проффи)))
насчёт строки - о closest() даже не подумал, сделал тупо чрез двух parent()
а насчёт столбца - вообщем то впринципе я размышлял так же - узнать нужный номер йчейки встроке, а затем, а застем передавать значение во все строки, но реализовать не смог

скажите а почему on() а не bind() ? вообще первый раз его вижу

в любом случае СПАСИБО ВАМ БОЛЬШОЕ!

@doozy · 22.03.2014, 00:14

Сообщение от Lazy_Den

Тогда очень странно, что у вас не возник вопрос по поводу пятой строки. Это означает, что мы подставляем индекс который вычислили у кнопки "удаления колонки", по которой был клик.

Теперь возник) Index возвращает одно число - индекс элемента в DOM, правильно? Я так понял, если мы вызываем index() так, то возвращается индекс элемента относительно таких же элементов, находящихся на одном уровне. А если так index('selector') - то перебирает и родителей еще и возвращает относительно них?

@Lazy_Den · 22.03.2014, 00:15

Сообщение от crazymActep

скажите а почему on() а не bind() ?

on() - более универсальный метод, который включает в себя функционал устаревшего метода live(), метода bind() и delegate(), хотя bind() тут тоже может быть.

@doozy · 22.03.2014, 00:16

Где можно почитать подоступнее про это?) А то в документации не очень понятно для меня

@Lazy_Den · 22.03.2014, 00:25

Сообщение от doozy

А то в документации не очень понятно для меня

Без иглиша, в этом деле, далеко не уедешь

Посмотрите тут, может будет более ясно.

Добавлено через 1 минуту

Сообщение от doozy

А если так index('selector')

Читаем тут

@doozy · 22.03.2014, 00:37

Спасибо большое) Да как раз то с инглишом проблем нет, проблемы больше из-за недостаточного знания определений, что куда передается и т.д. И смотрел про index на jquery-docs.ru , понял что так делать нехорошо)) На оф. сайте куда понятнее объяснено)

@crazymActep · 23.03.2014, 16:43 **[ТС]**

ещё вопросик
в данной же таблице необходимо пропусть чз свою функцию myfoo() (работает со строками) все зачения из указанного столбца и вставить новые значения обратно

я так понимаю за основу взять написаный выше код

JavaScript
1
2
3
4
5
$('.col_DEL').on('click', function(){
    var colIndex = $(this).index('.col_DEL');
    $('tr').each(function(){
        $('td:eq(' + colIndex + ')', this).remove();
    });

вместо remove() уже html() - чтобы брал зачения яйчеек, но как потом продолжить даную цепочку не знаю

@Lazy_Den · 23.03.2014, 17:20

Сообщение от crazymActep

вместо remove() уже html()

Или text(), в зависимости от того, что вам надо.

Сообщение от crazymActep

но как потом продолжить даную цепочку не знаю

Куда продолжить? Как вставить обработанные данные? Придумать можно не один способ. Вот, по аналогии с примером, который я вам давал раньше:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
function myfoo(o){
    return $(o).text($(o).text() + ' Add');
}
 
$('.row_DEL').on('click', function(){
    $(this).closest('tr').remove();
});
$('.col_DEL').on('click', function(){
    var colIndex = $(this).index('.col_DEL');
    $('tr:not(:first)').map(function(i,el){
        return myfoo( $('td:eq(' + colIndex + ')', this) );
    });
});

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@crazymActep 1 / 1 / 1 Регистрация: 21.03.2014 Сообщений: 12
	21.03.2014, 23:58 [ТС]
	ого! спасибо за ваш такой быстрый ответ! вот что значит проффи))) насчёт строки - о closest() даже не подумал, сделал тупо чрез двух parent() а насчёт столбца - вообщем то впринципе я размышлял так же - узнать нужный номер йчейки встроке, а затем, а застем передавать значение во все строки, но реализовать не смог скажите а почему on() а не bind() ? вообще первый раз его вижу в любом случае СПАСИБО ВАМ БОЛЬШОЕ! 0

@doozy 1 / 1 / 0 Регистрация: 20.11.2013 Сообщений: 32
	22.03.2014, 00:16
	Где можно почитать подоступнее про это?) А то в документации не очень понятно для меня 0

@doozy 1 / 1 / 0 Регистрация: 20.11.2013 Сообщений: 32
	22.03.2014, 00:37
	Спасибо большое) Да как раз то с инглишом проблем нет, проблемы больше из-за недостаточного знания определений, что куда передается и т.д. И смотрел про index на jquery-docs.ru , понял что так делать нехорошо)) На оф. сайте куда понятнее объяснено) 0

Выбор селекторами строки и столбца таблицы

Решение