Javascript-форум - Выделение ячеек в таблице

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Выделение ячеек в таблице (https://javascript.ru/forum/jquery/61205-vydelenie-yacheek-v-tablice.html)

Выделение ячеек в таблице

Задача такая, в таблице при клике по любой ячейке менять её фон на зеленый, при повторном клике по той же ячейке удалять этот фон.

Я реализовал эту задачу, но сталкнулся с проблемой, если кликнуть по ячейке(фон станет зеленым), потом кликнуть еще раз что бы убрать этот фон и после этого кликнуть по другой ячейке, предыдущая ячйка снова сменит фон на зеленый. видимо у меня ошибка с использованием $(this)

Прошу помогите разобраться, что я сделал не так?
Код:

$( document ).ready(function() {
		$(".table_id").click(function() {
			var rtt = $(this);		
			if(rtt.attr('check') == 'none')
			{
				$('#but_green').click(function() {			
				rtt.attr('check','checked');
				rtt.attr('style', 'background:#00FF7F;');
			});
				$('#but_red').click(function() {			
				rtt.attr('check','checked');
				rtt.attr('style', 'background:#FF3030;');
			});		
			}
			else
			{
				rtt.attr('check','none');
			}
	});
});

BIGserg, делегирование надо использовать.

Вот тут можно попробовать: http://fecta.ru/index5.php

BIGserg,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .active{
       background:#00FF7F
    }
   td {
      background:#FF3030;
   }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
   <script>
   $(function(){
       $(".table_id").on("click", "td", function() {$(this).toggleClass("active")})
   })
  </script>
</head>

<body>
<table width="400" class="table_id" >
	<thead>
		<tr>
			<th>Title 1</th>
			<th>Title 2</th>
			<th>Title 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Cell 1.1</td>
			<td>Cell 1.2</td>
			<td>Cell 1.3</td>
		</tr>
		<tr>
			<td>Cell 2.1</td>
			<td>Cell 2.2</td>
			<td>Cell 2.3</td>
		</tr>
	</tbody>
</table>
</body>

</html>

Цитата:

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

делегирование надо использовать.

необязательно

Большое спасибо!

Выбор цвета для ячейки таблицы

BIGserg,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .red{
       background:#FF0000
    }
   .green{
     background-color: #008000;
   }
   td {
       background-color: #FFFACD;
   }
   div{
      width: 100px;
      height: 30px;
   }
   .color{
     display: none;
   }
  .select{
      border: dashed 2px #8B4513;
      margin: -4px;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
   <script>
   $(function(){
        var el;
       function setColor()
       {  $(".table_id td").removeClass("select");
          var color = $(this).data("color");
          el.addClass(color).data("color",color);
          $(".color").hide()
       }
       $(".table_id").on("click", "td", function() {
       var color = $(this).data("color");
       $(".table_id td").removeClass("select")
       if(color){ $(this).removeClass(color).removeData("color");$(".color").hide() }
       else {
         el=$(this);
         el.addClass("select");
         $(".color").show()}
         })
       $(".color").on("click", setColor)
   })
  </script>
</head>

<body>
<table width="400" class="table_id" >
    <thead>
        <tr>
            <th>Title 1</th>
            <th>Title 2</th>
            <th>Title 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1.1</td>
            <td>Cell 1.2</td>
            <td>Cell 1.3</td>
        </tr>
        <tr>
            <td>Cell 2.1</td>
            <td>Cell 2.2</td>
            <td>Cell 2.3</td>
        </tr>
    </tbody>
</table>
<div class="color red" data-color="red"></div>
<div class="color green" data-color="green"></div>
</body>

</html>