Форум

Ongi · #1 (**permalink**) 28.04.2014, 18:31

Есть таблица в 2 колонки. Строки в первой колонке могут повторяться.

название1 4
название2 9
название1 8
название2 5

нужно, чтобы при нажатии на строку, все строки с этим же названием в первой колонке поменяли класс

у меня получилось так:

$("tr").click(function(){
		if ($(this).hasClass("название1")) {
			$(".название1").toggleClass("selected");
		}
		else if ($(this).hasClass("название2")) {
			$(".название2").toggleClass("selected");
		}
	});

все работает, вот только этих вариантов строк много, придется для каждой условие писать, можно ли это сделать проще?

рони · #2 (**permalink**) 28.04.2014, 19:10

Ongi,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .selected  {
    background: #32CD32;
  }
  td{
    width: 50px;
    border: #0000FF 1px solid;
    cursor: pointer;
    padding: 2px 4px;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function () {
          var $tr = $("tr");
          $tr.click(function () {
              var text = $("td:first", this).text();
              $tr.each(function () {
                  $("td:first", this).text() == text ? $(this).toggleClass("selected") : $(this).removeClass("selected");
              });
          })
      })
  </script>
</head>

<body>
<table style="background-color: #D3D3D3; border-color: #000000">
  <tr>
    <td>название1</td>
    <td></td>
  </tr>
  <tr>
    <td>название2</td>
    <td></td>
  </tr>
  <tr>
    <td>название2</td>
    <td></td>
  </tr>
  <tr>
    <td>название1</td>
    <td></td>
  </tr>
  <tr>
    <td>название1</td>
    <td></td>
  </tr>
</table>
</body>

</html>

Ongi · #3 (**permalink**) 28.04.2014, 20:46

рони, спасибо большое! я бы не додумалась )
только мне надо было, чтобы "нажатия" оставались, убрала removeClass, теперь все как надо

Форум

Справочник

Discord чат

Курсы javascript