如何在onmousedown事件中更改所选行的颜色

Question

我正在尝试在onmousedown事件和reset所有其他事件上更改表中所选行的颜色（或保持不变）。一次只能有red一行，而其他所有行都是green。

我尝试过的事情：

function HighLight(id) {
  var rows = $('#tbl > tbody > tr').each(function(elem) {
    elem.style.background = 'green';
  })
  var tr = document.getElementById(id);
  tr.style.background = 'red';
}

<table id="tbl">
  <tr id="tr1" style="background-color:aquamarine" onmousedown="Highlight(e)">
    <td>
      v1
    </td>
  </tr>
  <tr id="tr2" style="background-color:aquamarine" onmousedown="Highlight(e)">
    <td>
      v2
    </td>
  </tr>
  <tr id="tr3" style="background-color:aquamarine" onmousedown="Highlight(e)">
    <td>
      v3
    </td>
  </tr>
</table>

理想情况下，我想存储选中的old行，这样我就不会在每个新选择处都重置所有其他行，但是如果我无法重置所有行，则可以这样做。

PS 我需要根据提供的id进行说明。我使用的是interop，因此ID来自外部。我所有的tr都注入了该方法。

Answer 1

这是一个有关如何执行此操作的快速示例。

$("table tr").on('click', function(){
  $(".highlighted").removeClass("highlighted");
  $(this).addClass("highlighted");
});

table tr {
  background: green;
}
table tr.highlighted {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbl">
  <tr id="tr1">
    <td>
      v1
    </td>
  </tr>
  <tr id="tr2">
    <td>
      v2
    </td>
  </tr>
  <tr id="tr3">
    <td>
      v3
    </td>
  </tr>
</table>

这是它的工作方式：

1. 它将click事件绑定到表（tr）中的每一行，
2. 每次单击一行时，所有具有名为highlighted的类的元素都会将其松散，而您单击的行将得到highlighted的类，

在CSS中，您可以更改所有行的默认背景颜色以及突出显示后的颜色。

如果您不想使用css，这里的功能是类似的，但是除了添加和删除类外，它与内联css属性也相同。

$("table tr").on('click', function(){
  $("table tr").css("background", "green");
  $(this).css("background", "red");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbl">
  <tr id="tr1" style="background: green;">
    <td>
      v1
    </td>
  </tr>
  <tr id="tr2" style="background: green;">
    <td>
      v2
    </td>
  </tr>
  <tr id="tr3" style="background: green;">
    <td>
      v3
    </td>
  </tr>
</table>

但是我不建议第二种解决方案。

Answer 2

您可以有两个CSS类；一个用于选定的行，另一个用于剩余的行。 单击该行后，可以将“选定的”类添加到该行。

$("#tbl tr").click(function(){
 
 var $this = $(this);
 //remove the previous row selection, if any
 $("#tbl tr.selected").removeClass("selected");
 //add selected class to the current row
 $this.addClass("selected");

});

#tbl tr{
background-color: aquamarine;
}

#tbl tr.selected{
background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="tbl">
  <tr id="tr1">
    <td>
      v1
    </td>
  </tr>
  <tr id="tr2" >
    <td>
      v2
    </td>
  </tr>
  <tr id="tr3" >
    <td>
      v3
    </td>
  </tr>
</table>

Answer 3

函数名称错误，其Highlight而不是HighLight

要在函数调用中传递元素的ID，您不能仅传递任何变量（在您的情况下为 e ）。使用this.getAttribute('id')获取ID。

在each()中，元素的自变量elem represented the index而不是元素本身。为索引引入另一个参数。

function Highlight(id) {
  var rows = $('#tbl > tbody > tr').each(function(i,elem) {
    elem.style.background = 'green';
  })
  var tr = document.getElementById(id);
  tr.style.background = 'red';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbl">
  <tr id="tr1" style="background-color:aquamarine" onmousedown="Highlight(this.getAttribute('id'))">
    <td>
      v1
    </td>
  </tr>
  <tr id="tr2" style="background-color:aquamarine" onmousedown="Highlight(this.getAttribute('id'))">
    <td>
      v2
    </td>
  </tr>
  <tr id="tr3" style="background-color:aquamarine" onmousedown="Highlight(this.getAttribute('id'))">
    <td>
      v3
    </td>
  </tr>
</table>

Answer 4

您可以这样做。通过使用类，您可以执行其他操作

$("#tbl").on("click", "tr", function() {
  $(' tr').removeClass("Red")

  $(this).addClass("Red")
});

.Red {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbl">
  <tr id="tr1">
    <td>
      v1
    </td>
  </tr>
  <tr id="tr2">
    <td>
      v2
    </td>
  </tr>
  <tr id="tr3">
    <td>
      v3
    </td>
  </tr>
</table>

Answer 5

几个问题：

• JS区分大小写，因此Highlight和HighLight（大写L）不相同。我将HighLight函数重命名为Highlight（小写l）
• 在事件处理程序属性中的函数调用上使用参数this。这会将事件处理程序属性的HTML元素移交给事件处理程序功能（在您的情况下为Highlight）
• jQuery的each方法的回调函数将index作为第一个参数并将元素作为第二个

这使您的代码正常工作

function Highlight(tr) {
  var rows = $('#tbl > tbody > tr').each(function(index, elem) {
    elem.style.backgroundColor = 'green';
  })
  tr.style.background = 'red';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="tbl">
  <tr id="tr1" style="background-color:aquamarine" onmousedown="Highlight(this)">
    <td>
      v1
    </td>
    <td>
      v1
    </td>
    <td>
      v1
    </td>
  </tr>
  <tr id="tr2" style="background-color:aquamarine" onmousedown="Highlight(this)">
    <td>
      v2
    </td>
    <td>
      v2
    </td>
    <td>
      v2
    </td>
  </tr>
  <tr id="tr3" style="background-color:aquamarine" onmousedown="Highlight(this)">
    <td>
      v3
    </td>
    <td>
      v3
    </td>
    <td>
      v3
    </td>
  </tr>

</table>

您还可以做一些其他事情来增强代码

1. 在您的JS代码中不要使用样式，而是为CSS设置类
2. 不要使用HTML onmousedown属性，而要使用JS addEventListeners
3. 用VanillaJS替换jQuery代码

console.clear()
const rows = document.querySelectorAll('#tbl > tbody > tr');
for (row of rows) {
  row.addEventListener('mousedown', Highlight)
}

function Highlight(e) {
  e.preventDefault()
  const tr = this
  const rows = document.querySelectorAll('#tbl > tbody > tr');
  for (row of rows) {
    row.classList.remove('highlight')
    row.classList.add('highlight-siblings')
  }
  tr.classList.remove('highlight-siblings')
  tr.classList.add('highlight')
}

/* 1. */
tr {
  background-color: aquamarine;
}
tr.highlight-siblings{
  background-color: green;
}
tr.highlight{
  background-color: red;
}

<table id="tbl">
  <tr>
    <td>
      v1
    </td>
    <td>
      v1
    </td>
    <td>
      v1
    </td>
  </tr>
  <tr>
    <td>
      v2
    </td>
    <td>
      v2
    </td>
    <td>
      v2
    </td>
  </tr>
  <tr>
    <td>
      v3
    </td>
    <td>
      v3
    </td>
    <td>
      v3
    </td>
  </tr>

</table>