Question

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

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

我已经尝试了各种方法，但是仍然找不到解决方法。

谢谢

<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>

{{1}}

Answer 1

假设：

在第一列中，如果您单击[it]，则显示数字6和5-我需要的是，它只能让我每列选择一个数字，也就是说列，它只允许我选择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>

选择器列表jquery

2 个答案: