javascript - 如何在单击 TR 时选择它并在单击另一个 TR 时删除选择

Question

嗨，我有一个表格，我在这里做了一些代码来将表格更改为可编辑和可选择...我的要求是 1.当点击一个TR时，它应该变成蓝色，再次点击另一个TR，它将显示蓝色，旧的TR变成白色(威胁不可选择)

我由于一些代码是可行的，但原因是我已经有一些代码用于选择我需要的TD，我在这里很挣扎，我无法像TR选择一样删除这个td选择

$(function() {
  $(".cat").dblclick(function() {
    var OriginalContent = $(this).text();
    $(this).addClass("cellEditing1")
    $(this).html("<input id='value' type='text' value='" + OriginalContent + "' />");
  })


  $('tr').click(function() {
    $('tr').removeClass('selected1');
    $(this).addClass('selected1');

  });

  $(".cat").on("click", function() {
    $(this).removeClass('selected')
    $(this).addClass('selected');
  });
  $(".cat1").on("click", function() {
    $(this).removeClass('selected2')
    $(this).addClass('selected2');
  });

  $("#key").click(function() {

    var sl = parseInt($(".selected").css("padding-left"));
    sl = sl >= 20 ? "20" : "+=20";

    $(".selected").css({
      "padding-left": sl

    });
    var sq = parseInt($(".selected2").css("padding-left"));
    sq = sq >= 40 ? "40" : "+=20";

    $(".selected2").css({
      "padding-left": sq

    });
    $(".cat.selected").each(function() {
      var prevTd = $(this).closest('tr').prev('tr').find('td:eq(' + $(this).index() + ')');
      console.log('Current td index: ' + $(this).index());
      console.log('Previous td content: ' + prevTd.text());

      prevTd.addClass("mainfunctionstyle");
      prevTd.find('input').addClass("mainfunctionstyle");



    });

    $(".cat1.selected2").each(function() {

      var paddingLeftpl = parseInt($(this).css("padding-left"));
      if (paddingLeftpl == 40) {
        $(".selected2").addClass("taskstyle");
        $(".selected2").find('input').addClass("taskstyle");
      }

    });
  });
});

.selected {
  background-color: lightblue;
}
.selected1 {
  background-color: lightblue;
}
.selected2 {
  background-color: lightblue;
}
.editableTable {
  position: static;
  width: 100%;
  border-collapse: collapse;
}
.editableTable td {
  border: 1px solid;
  height: 17px;
}
.editableTable .cellEditing1 input[type=text] {
  width: 100%;
  border: none;
  text-align: left;
  background-color: transparent;
}
.editableTable .cellEditing1 {
  padding: 0;
  height: 1px;
}
.mainfunctionstyle {
  color: yellow;
  font-weight: bold;
  font-size: 10px;
}
.sunfunctionstyle {
  color: black;
  font-weight: normal;
  font-size: 8px;
}
.taskstyle {
  color: red;
  font-weight: normal;
  font-size: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<button id="key">left</button>
<table class="editableTable">
  <tr>
    <td class="cat">rose11</td>
    <td class="cat">red12</td>
  </tr>
  <tr>
    <td class="cat">rose21</td>
    <td class="cat">red22</td>
  </tr>
  <tr>
    <td class="cat1">rose31</td>
    <td class="cat">red32</td>
  </tr>
  <tr>
    <td class="cat2">rose41</td>
    <td class="cat">red42</td>
  </tr>

Answer 1

我刚刚对您的代码做了一些修改。由于 selected、selected1 和 selected2 具有相同的 css 属性。我只使用了selected类。我在js中做了这样的修改:

$(".selected1").removeClass('selected1')
$(this).addClass('selected1');

$(function() {
  $(".cat").dblclick(function() {
    var OriginalContent = $(this).text();
    $(this).addClass("cellEditing1")
    $(this).html("<input id='value' type='text' value='" + OriginalContent + "' />");
  })


  $('tr').click(function() {
    $('.selected1').removeClass('selected1');
    $(this).addClass('selected1');

  });

  $(".cat").on("click", function() {
    $(".selected1").removeClass('selected1')
    $(this).addClass('selected1');
  });
  $(".cat1").on("click", function() {
    $('.selected1').removeClass('selected1')
    $(this).addClass('selected1');
  });

  $("#key").click(function() {

    var sl = parseInt($(".selected").css("padding-left"));
    sl = sl >= 20 ? "20" : "+=20";

    $(".selected").css({
      "padding-left": sl

    });
    var sq = parseInt($(".selected2").css("padding-left"));
    sq = sq >= 40 ? "40" : "+=20";

    $(".selected2").css({
      "padding-left": sq

    });
    $(".cat.selected").each(function() {
      var prevTd = $(this).closest('tr').prev('tr').find('td:eq(' + $(this).index() + ')');
      console.log('Current td index: ' + $(this).index());
      console.log('Previous td content: ' + prevTd.text());

      prevTd.addClass("mainfunctionstyle");
      prevTd.find('input').addClass("mainfunctionstyle");



    });

    $(".cat1.selected2").each(function() {

      var paddingLeftpl = parseInt($(this).css("padding-left"));
      if (paddingLeftpl == 40) {
        $(".selected2").addClass("taskstyle");
        $(".selected2").find('input').addClass("taskstyle");
      }

    });
  });
});

.selected {
  background-color: lightblue;
}

.selected1 {
  background-color: lightblue;
}

.selected2 {
  background-color: lightblue;
}

.editableTable {
  position: static;
  width: 100%;
  border-collapse: collapse;
}

.editableTable td {
  border: 1px solid;
  height: 17px;
}

.editableTable .cellEditing1 input[type=text] {
  width: 100%;
  border: none;
  text-align: left;
  background-color: transparent;
}

.editableTable .cellEditing1 {
  padding: 0;
  height: 1px;
}

.mainfunctionstyle {
  color: yellow;
  font-weight: bold;
  font-size: 10px;
}

.sunfunctionstyle {
  color: black;
  font-weight: normal;
  font-size: 8px;
}

.taskstyle {
  color: red;
  font-weight: normal;
  font-size: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<button id="key">left</button>
<table class="editableTable">
  <tr>
    <td class="cat">rose11</td>
    <td class="cat">red12</td>
  </tr>
  <tr>
    <td class="cat">rose21</td>
    <td class="cat">red22</td>
  </tr>
  <tr>
    <td class="cat1">rose31</td>
    <td class="cat">red32</td>
  </tr>
  <tr>
    <td class="cat2">rose41</td>
    <td class="cat">red42</td>
  </tr>

希望有帮助:)