选择器列表jquery

Question

大家好，我希望你能帮助我

我有按列执行此操作所需的代码。它目前只允许我选择一个数字，而不是全部。

我试过各种方法，但仍然找不到解决办法。

谢谢

$(document).ready(function() {
$(".row_number").bind("click", function(e) {
if ($(this).css("background-color") != "rgb(26, 179, 148)") {
$(this).css("background-color", "rgb(26, 179, 148)");
$(this).css("color", "white");
} else {
$(this).css("background-color", "rgb(255,255,255)");
$(this).css("color", "#676a6c");
}
})
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-exam" border="1">
<tr>
<th class="text-center" colspan="11">ESCALA DE COMA DE GLASGOW </th>
</tr>
<tr>
<th class="text-center" colspan="4">Respuesta Motora</th>
<th class="text-center" colspan="5">Respuesta Verbal</th>
<th class="text-center" colspan="3">Apertura Ocular</th>
</tr>
<tr>
<td width="50" class="text-center" colspan="2">OBEDECE</td>
<td class="text-center row_number" data-number="1" colspan="2">6</td>
<td class="text-center" colspan="3">ORIENTADO</td>
<td class="text-center row_number" colspan="2">5</td>
<td class="text-center">EXPONTANEA</td>
<td class="text-center row_number">4</td>
</tr>
<tr>
<td class="text-center" colspan="2">LOCALIZA</td>
<td class="text-center row_number" data-number="1" colspan="2">5</td>
<td class="text-center" colspan="3">DESORIENTADO</td>
<td class="text-center row_number" colspan="2">4</td>
<td class="text-center">A LA VOZ</td>
<td class="text-center row_number">3</td>
</tr>
</table>

Answer 1

假设：

在第一列中，如果你点击其中一个，就会显示数字6和5，你可以选择[it]-我需要的是，它只允许我在每列中选择一个数字，也就是说，在该列中，它只让我选择6或5

这也假设

您想保留现有的HTML

(关于使用data-属性对类似数据进行分组的替代方案，请参见@ksav的回答(

当您选择/单击其中一个时，它需要关闭其他任何选项。这比直接设置颜色更容易使用类：

$(".row_number").on("click", function(e) {
$(".row_number").removeClass("selected");
$(this).addClass("selected");
})

这将适用于所有.row_number，但您的需求似乎在一列中，这有点棘手：

您需要找到已单击的列，然后仅从该列中的单元格中删除类：

var col = $(this).closest("td").index() + 1;
$("#table-exam tr td:nth-child(" + col + ")").removeClass("selected");

给予：

$(document).ready(function() {
$(".row_number").on("click", function(e) {
var col = $(this).closest("td").index() + 1;
$("#table-exam tr td:nth-child(" + col + ")").removeClass("selected");
$(this).addClass("selected");
})
})

.selected { background-color: rgb(26,179,148); color:white; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-exam" border="1">
<tr>
<th class="text-center" colspan="11">ESCALA DE COMA DE GLASGOW </th>
</tr>
<tr>
<th class="text-center" colspan="4">Respuesta Motora</th>
<th class="text-center" colspan="5">Respuesta Verbal</th>
<th class="text-center" colspan="3">Apertura Ocular</th>
</tr>
<tr>
<td width="50" class="text-center" colspan="2">OBEDECE</td>
<td class="text-center row_number" data-number="1" colspan="2">6</td>
<td class="text-center" colspan="3">ORIENTADO</td>
<td class="text-center row_number" colspan="2">5</td>
<td class="text-center">EXPONTANEA</td>
<td class="text-center row_number">4</td>
</tr>
<tr>
<td class="text-center" colspan="2">LOCALIZA</td>
<td class="text-center row_number" data-number="1" colspan="2">5</td>
<td class="text-center" colspan="3">DESORIENTADO</td>
<td class="text-center row_number" colspan="2">4</td>
<td class="text-center">A LA VOZ</td>
<td class="text-center row_number">3</td>
</tr>
</table>

Answer 2

$(document).ready(function() {
$(".row_number").bind("click", function(e) {
const type = $(this).data('type')
const $sameOfType = $('[data-type="' + type + '"]')
$sameOfType.removeClass('selected')
$(this).addClass('selected')
})
})

.selected {
background-color: rgb(26, 179, 148);
color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-exam" border="1">
<tr>
<th class="text-center" colspan="11">ESCALA DE COMA DE GLASGOW </th>
</tr>
<tr>
<th class="text-center" colspan="4">Respuesta Motora</th>
<th class="text-center" colspan="5">Respuesta Verbal</th>
<th class="text-center" colspan="3">Apertura Ocular</th>
</tr>
<tr>
<td width="50" class="text-center" colspan="2">OBEDECE</td>
<td class="text-center row_number " data-number="1" colspan="2" data-type="motora">6</td>
<td class="text-center" colspan="3">ORIENTADO</td>
<td class="text-center row_number " colspan="2" data-type="verbal">5</td>
<td class="text-center">EXPONTANEA</td>
<td class="text-center row_number " data-type="ocular">4</td>
</tr>
<tr>
<td class="text-center" colspan="2">LOCALIZA</td>
<td class="text-center row_number" data-number="1" colspan="2" data-type="motora">5</td>
<td class="text-center" colspan="3">DESORIENTADO</td>
<td class="text-center row_number" colspan="2" data-type="verbal">4</td>
<td class="text-center">A LA VOZ</td>
<td class="text-center row_number" data-type="ocular">3</td>
</tr>
</table>