高亮一次只能切换一行，切换css类

Question

如果我在像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>

Answer 1

您的JavaScript需要类似的内容：

ggplot

add.filled.arc <- function(center.x, center.y, radius, angle.start, angle.end, col='black') {
  theta <- seq(angle.start, angle.end, .0001)
  segments(0, 0, radius*cos(theta), radius*sin(theta), col)
  segments(0, 0, cos(angle.start), sin(angle.start), col='gray')
  segments(0, 0, cos(angle.end), sin(angle.end), col='gray')
}

plot.coord.polar <- function(df) {
  df <- df[complete.cases(df),]
  df <- df[order(df[,1]),]
  df[,1] <- df[,1]*(pi/180) # convert dir to radian
  df[,2] <- df[,2] / max(df[,2]) # normalize magnitude within [0-1]
  plot(-1:1, -1:1, type= 'n', xlab='', ylab='', xaxt='n', yaxt='n')
  sapply(1:(nrow(df)-1), function(i) add.filled.arc(0, 0, df[i,2], df[i,1], df[i+1,1], rainbow(nrow(df))[i]))
  theta <- seq(0, 2*pi, 0.0001)
  lines(cos(theta), sin(theta), col='gray')
}

df <- read.table(text='Dir      N
                 1: 360  56564
                 2:   0     NA
                 3: 180 149374
                 4: 210  82219
                 5: 240  23315
                 6: 300  11436
                 7: 330  30648
                 8:  30  32198
                 9:  60  15266
                 10:  90  14596
                 11: 120  26267
                 12: 150  81782
                 13: 270  10100', header=TRUE)
plot.coord.polar(df)

$(document).ready(function() {
  $("#rowClick").on('click', 'tr', function() {
    $(this)
      .addClass('active')
      .siblings()
          .removeClass('active');
  });
});

Answer 2

你可以这样做：

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

Answer 3

$(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）

Answer 4

检查一下，

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

我希望这会奏效。

Answer 5

这是一个解决方案，其中可以在第二次单击同一行后删除类。

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