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

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

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

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

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

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

Размер: 21.2 Кб

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

Размер: 21.2 Кб

код:

HTML5

<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

$('.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

$('.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

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) );
    });
});

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

@doozy 1 / 1 / 0 Регистрация: 20.11.2013 Сообщений: 32
	21.03.2014, 23:41	3
	Сообщение от Lazy_Den 'td:eq(' + colIndex + ')' А что эта часть означает? Добавлено через 4 минуты Выбор элемента с индексом... Что за плюсы перед и после colIndex? 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	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 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	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 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	22.03.2014, 00:25	9
	Сообщение от doozy А то в документации не очень понятно для меня Без иглиша, в этом деле, далеко не уедешь Посмотрите тут, может будет более ясно. Добавлено через 1 минуту Сообщение от doozy А если так index('selector') Читаем тут 1

	23.03.2014, 17:20

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

Решение