Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.50/14: Рейтинг темы: голосов - 14, средняя оценка - 4.50
crazymActep
1 / 1 / 1
Регистрация: 21.03.2014
Сообщений: 12
1

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

21.03.2014, 22:48. Просмотров 2568. Ответов 11
Метки нет (Все метки)

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

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

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

Размер: 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();                                 
});
а с удалениями колонок беда, никак родить не могу
 Комментарий модератора 
Прикрепляйте файлы и изображения к сообщениям.
http://www.cyberforum.ru/about-forum/thread103521.html#post594251
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
21.03.2014, 22:48
Ответы с готовыми решениями:

Получить значения строки и столбца таблицы по нажатию
Есть функция, которая рисует таблицу, до загрузки страницы. При нажатии на...

Вытащить текст с предыдущего столбца строки таблицы
Добрый день! ... &lt;td&gt;&lt;span&gt;1600&lt;/span&gt;&lt;/td&gt; &lt;td&gt; &lt;span&gt;300&lt;/span&gt; ...

Работа с селекторами, после подгрузки html через ajax
Добрый день! Подскажите как сделать, что бы в подгруженный html была...

Создание плавающего столбца таблицы.
Не знаю как описать точнее, но попробую. Есть таблица первый ее столбец должен...

Динамическое обновление столбца таблицы HTML
Привет, такой вопрос: как сделать обновление столбца (результат/процесс)...

11
Lazy_Den
2953 / 2624 / 1325
Регистрация: 15.01.2014
Сообщений: 5,766
21.03.2014, 23:20 2
Лучший ответ Сообщение было отмечено Lazy_Den как решение

Решение

Пример тестируем тут.
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();
    });
});
1
doozy
1 / 1 / 0
Регистрация: 20.11.2013
Сообщений: 32
21.03.2014, 23:41 3
Цитата Сообщение от Lazy_Den Посмотреть сообщение
'td:eq(' + colIndex + ')'
А что эта часть означает?

Добавлено через 4 минуты
Выбор элемента с индексом... Что за плюсы перед и после colIndex?
0
Lazy_Den
2953 / 2624 / 1325
Регистрация: 15.01.2014
Сообщений: 5,766
21.03.2014, 23:48 4
Цитата Сообщение от doozy Посмотреть сообщение
А что эта часть означает?
Тогда очень странно, что у вас не возник вопрос по поводу пятой строки. Это означает, что мы подставляем индекс который вычислили у кнопки "удаления колонки", по которой был клик.

Добавлено через 1 минуту
Цитата Сообщение от doozy Посмотреть сообщение
Что за плюсы перед и после colIndex?
Это конкатенация.
0
crazymActep
1 / 1 / 1
Регистрация: 21.03.2014
Сообщений: 12
21.03.2014, 23:58  [ТС] 5
ого! спасибо за ваш такой быстрый ответ! вот что значит проффи)))
насчёт строки - о closest() даже не подумал, сделал тупо чрез двух parent()
а насчёт столбца - вообщем то впринципе я размышлял так же - узнать нужный номер йчейки встроке, а затем, а застем передавать значение во все строки, но реализовать не смог

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

в любом случае СПАСИБО ВАМ БОЛЬШОЕ!
0
doozy
1 / 1 / 0
Регистрация: 20.11.2013
Сообщений: 32
22.03.2014, 00:14 6
Цитата Сообщение от Lazy_Den Посмотреть сообщение
Тогда очень странно, что у вас не возник вопрос по поводу пятой строки. Это означает, что мы подставляем индекс который вычислили у кнопки "удаления колонки", по которой был клик.
Теперь возник) Index возвращает одно число - индекс элемента в DOM, правильно? Я так понял, если мы вызываем index() так, то возвращается индекс элемента относительно таких же элементов, находящихся на одном уровне. А если так index('selector') - то перебирает и родителей еще и возвращает относительно них?
0
Lazy_Den
2953 / 2624 / 1325
Регистрация: 15.01.2014
Сообщений: 5,766
22.03.2014, 00:15 7
Цитата Сообщение от crazymActep Посмотреть сообщение
скажите а почему on() а не bind() ?
on() - более универсальный метод, который включает в себя функционал устаревшего метода live(), метода bind() и delegate(), хотя bind() тут тоже может быть.
0
doozy
1 / 1 / 0
Регистрация: 20.11.2013
Сообщений: 32
22.03.2014, 00:16 8
Где можно почитать подоступнее про это?) А то в документации не очень понятно для меня
0
Lazy_Den
2953 / 2624 / 1325
Регистрация: 15.01.2014
Сообщений: 5,766
22.03.2014, 00:25 9
Цитата Сообщение от doozy Посмотреть сообщение
А то в документации не очень понятно для меня
Без иглиша, в этом деле, далеко не уедешь Посмотрите тут, может будет более ясно.

Добавлено через 1 минуту
Цитата Сообщение от doozy Посмотреть сообщение
А если так index('selector')
Читаем тут
1
doozy
1 / 1 / 0
Регистрация: 20.11.2013
Сообщений: 32
22.03.2014, 00:37 10
Спасибо большое) Да как раз то с инглишом проблем нет, проблемы больше из-за недостаточного знания определений, что куда передается и т.д. И смотрел про index на jquery-docs.ru , понял что так делать нехорошо)) На оф. сайте куда понятнее объяснено)
0
crazymActep
1 / 1 / 1
Регистрация: 21.03.2014
Сообщений: 12
23.03.2014, 16:43  [ТС] 11
ещё вопросик
в данной же таблице необходимо пропусть чз свою функцию 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() - чтобы брал зачения яйчеек, но как потом продолжить даную цепочку не знаю
0
Lazy_Den
2953 / 2624 / 1325
Регистрация: 15.01.2014
Сообщений: 5,766
23.03.2014, 17:20 12
Цитата Сообщение от 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) );
    });
});
0
23.03.2014, 17:20
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
23.03.2014, 17:20

Узнать индекс столбца таблицы с помощью ячейки
У меня есть таблица, с полями... &lt;table&gt; &lt;tr&gt; &lt;th&gt;ID&lt;/th&gt; &lt;th&gt;COUNT&lt;/th&gt;...

выбор значений из таблицы
у меня есть таблица html из двух столбцов id и value. как сделать, чтобы при...

выбор текста из столбцов таблицы через символ
Всем привет, ребят подскажите, вообщем имеется таблица вот такой код &lt;thead&gt;...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
12
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru