Если у меня есть строки в таблице, подобной этой http://output.jsbin.com/icusec/2 где я выделяю выделенную строку одним щелчком мыши, как я могу улучшить ее, выбрав только одну, например, если я сначала выберу третью строку, она будет выделена, но когда я нажму на вторую строку, вторая строка должна стать выделенной и третий не должен.

$(document).ready(function(){
    $("#rowClick").children("tbody").children("tr").children("td").click(function(){
        $(this.parentNode).toggleClass("active");
    });
});

table, table tr, table tr td {margin: 0; padding: 0; border: 0; cursor: pointer;}
table tr.active td {background: #ccc;}

<table id="rowClick">
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
  </table>
0
user1765862 13 Янв 2017 в 10:26

5 ответов

Лучший ответ
$(document).ready(function() {
  $("#rowClick").children("tbody").children("tr").children("td").click(function(){
    $('#rowClick tbody tr').removeClass('active')
    $(this.parentNode).toggleClass("active");
  });
});
.active{color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="rowClick">
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>
  1. Удалить класс на всех tr, затем добавить класс на родительском, на который нажали (добавить селектор, чтобы быть точным, чтобы не влиять на другие tr)
1
guradio 13 Янв 2017 в 07:32

Ваш JavaScript хотел бы что-то вроде:

$(document).ready(function() {
  $("#rowClick").on('click', 'tr', function() {
    $(this)
      .addClass('active')
      .siblings()
          .removeClass('active');
  });
});
table,
table tr,
table tr td {
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
}
table tr.active td {
  background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="rowClick">
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>
3
Kees van Lierop 13 Янв 2017 в 08:02

Проверь это,

$(document).ready(function(){
    $("td").click(function(){
        $(this).closest("#rowClick").find("tr").removeClass("active");
        $(this.parentNode).addClass("active");
    });
});

Я надеюсь, что это сработает.

1
Rahul 13 Янв 2017 в 07:33

Вы можете сделать это так:

$(document).ready(function(){
    $("#rowClick").children("tbody").children("tr").children("td").click(function(){
    	$("tr").removeClass("active");
        $(this.parentNode).addClass("active");
    });
});
table, table tr, table tr td {margin: 0; padding: 0; border: 0; cursor: pointer;}
table tr.active td {background: #ccc;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="rowClick">
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
  </table>
1
Arkej 13 Янв 2017 в 07:32

Вот решение, где класс может быть удален после второго щелчка по той же строке.

$(document).ready(function(){
    $("#rowClick tbody tr").click(function(){
      if ($(this).hasClass("active")) {
          $(this).removeClass("active");
      }
      else {
        $("#rowClick tbody tr").removeClass("active");
        $(this).addClass("active");
     }
    });
});
table, table tr, table tr td {margin: 0; padding: 0; border: 0; cursor: pointer;}
table tr.active td {background: #ccc;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="rowClick">
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
  </table>
1
Banzay 13 Янв 2017 в 07:39