Форум

arashvg · #1 (**permalink**) 08.06.2014, 11:36

Суть вопроса в чем, есть таблица, которая состоит из двух столбцов. При клике по ячейке она изменяет цвет. Нужно, чтобы при в каждой колонке можно было бы выделить только одну ячейку.

Тоесть например был клик по ячейки номер 2, в первой колонке, она перекрасилась, потом клик по ячейки номер 5, в тойжэ колнонке, ячейка номер два возвращяет свой начальный цвет, а ячейка номер 5 перекаршивается. Тоже и с второй колонкой.

Просто перекрашивание ячейки сделал, а вот как сделать описаное выше?

Код:

<script>
 $(document).ready(function(){
    $('td').click(function () {
        $(this).toggleClass('click');
        });
    });
</script>

<style>
.click {
    background-color:green;
}
</style>

<table class="bordered">
<tr>
<td class="lc" id="id1" >Text1</td>
<td  class="rc" id="id2">Text2</td>
</tr>  
<tr>
<td class="lc" id="id3" >Text3</td>
<td  class="rc" id="id4">Text4</td>
</tr> 
<tr>
<td class="lc" id="id5" >Text5</td>
<td  class="rc" id="id6">Text6</td>
</tr> 
.....
</table>

arashvg · #2 (**permalink**) 08.06.2014, 11:47

Подсказали такой код:

$('td').click(function () {
    $('td').not($(this).toggleClass('click')).removeClass('click');
});

Но, нюанс, клик по ячейке в первой колонке, потом клик по ячейки второй колонки, первая колонка должны остатся закрашеной, а она возвращает первоначальной цвет.

Тоесть нужно выделить дв ячейки, одна в первой колонке, вторая в другой.

jsnb · #3 (**permalink**) 08.06.2014, 12:34

$(document).ready(function(){
  $('td').click(function () {
    var columnIndex = $(this).parent().find('td').index(this);
    var $column = $(this).parent().parent().find('td:nth-child('+ ++columnIndex +')');
    if ( $(this).hasClass('click') ) {
      $(this).removeClass('click');
    } else {
        $column.removeClass('click');
        $(this).addClass('click');
      }
  });
});

arashvg · #4 (**permalink**) 08.06.2014, 12:34

Проблема решена, может кому-то пригодится

<script>
$(document).ready(function() {
	$('table').on('click', 'td', function () {
		var index = $(this).index();
			$('td').filter(function() {
			return $(this).index() == index;
			}).removeClass('click');
    $(this).toggleClass('click');
	});
});
</script>

рони · #5 (**permalink**) 08.06.2014, 13:04

arashvg,

можно было добавить 1 строку в первоначальный вариант

<!DOCTYPE HTML>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style>
        .click {
            background-color: green;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
        $(function () {
            $('td').click(function () {
                $('.' + this.className).not(this).removeClass('click');
                $(this).toggleClass('click');
            });
        })
    </script>
</head>
<body>
    <table class="bordered">
        <tr>
            <td class="lc" id="id1">Text1</td>
            <td class="rc" id="id2">Text2</td>
        </tr>
        <tr>
            <td class="lc" id="id3">Text3</td>
            <td class="rc" id="id4">Text4</td>
        </tr>
        <tr>
            <td class="lc" id="id5">Text5</td>
            <td class="rc" id="id6">Text6</td>
        </tr>
    </table>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript