можно ли сделать код проще?
Есть таблица в 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");
}
});
все работает, вот только этих вариантов строк много, придется для каждой условие писать, можно ли это сделать проще? |
Выделение строк с одинаковым содержанием
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>
|
рони, спасибо большое! я бы не додумалась )
только мне надо было, чтобы "нажатия" оставались, убрала removeClass, теперь все как надо :) |
| Часовой пояс GMT +3, время: 22:05. |