JQuery 如何 select table 单元格和设置边框并取消 select 上一个单元格

Question

基于这两个例子： jQuery: Change the border color of ONE table cell & Getting td by index with jQuery;

我尝试 select table 单元格然后取消 select 前一个，但结果是我只 select 没有取消 select 单元格。

 var prevCol = -1;
     var prevRow = -1;
     $("#tbl_menu").on("click", "td" ,function () {
         var col = $(this).parent().children().index($(this));
          var row = $(this).parent().parent().children().index($(this).parent());

          //alert('Row: ' + row + ', Column: ' + col);
          $(this).toggleClass('selected');
           console.log("col"+col );
            console.log("prevCol"+prevCol );
          if(prevCol>-1)
          {
            console.log("ssss");
            var c = $('#tbl_menu tr').eq(prevRow).find('td').eq(prevCol).toggleClass('selectedOut');
            c.toggleClass('selectedOut');
          }
          prevCol = col;
          prevRow = row;
     });

和 table :

<table  id="tbl_menu" border="1" width="180px" >
 <tr>
    <td bgcolor="#FF6500">&nbsp;</td>
    <td bgcolor="#F4D7D7">&nbsp; </td>
    <td bgcolor="#F4D7D7">Coin</td>
    <td bgcolor="#F4D7D7">Gate</td>
    <td bgcolor="#F4D7D7">Coin Wall</td>
    <td >&nbsp; </td>
    <td >&nbsp; </td>
    <td >&nbsp; </td>

</tr>
</table>

和风格

<style>
table{
    border: 1px solid black;
    table-layout: fixed;
    width: 180px;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    width: 30px;
    hight: 30px;
}

td.selected { border: 3px solid #F00; }
td.selectedOut { border: 3px solid #F22; }
</style>

我做错了什么？

Answer 1

你把简单的东西复杂化了

$(document).ready(function() {
    $("#tbl_menu").on("click", "td", function() {
        $("#tbl_menu td.selected").removeClass('selected'); //Remove previous selected 
        $(this).addClass('selected'); //Add class to current cell
    });
});

    $(document).ready(function() {
        $("#tbl_menu").on("click", "td", function() {
            $("#tbl_menu td.selected").removeClass('selected');
            $(this).addClass('selected');
        });
    });

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 180px;
}
th,
td {
  border: 1px solid black;
  overflow: hidden;
  width: 30px;
  hight: 30px;
}
td.selected {
  border: 3px solid #F00;
}
td.selectedOut {
  border: 3px solid #F22;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl_menu" border="1" width="180px">
  <tr>
    <td bgcolor="#FF6500">&nbsp;</td>
    <td bgcolor="#F4D7D7">&nbsp;</td>
    <td bgcolor="#F4D7D7">Coin</td>
    <td bgcolor="#F4D7D7">Gate</td>
    <td bgcolor="#F4D7D7">Coin Wall</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>

  </tr>
</table>

Answer 2

试试这个

 $("#tbl_menu").on("click", "td" ,function () {
     $(this).siblings().removeClass('selected');
      $(this).addClass('selected');

 });

Working Demo

JQuery 如何 select table 单元格和设置边框并取消 select 上一个单元格

JQuery how to select table cell and set border and unselect the previous cell

jquery

html-table