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

Question

我正在尝试更改 onmousedown 事件中表格中所选行的颜色，并重置所有其他行(或保持它们相同)。一次只能有一行是红色，而所有其他行都是绿色。

我尝试过的:

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>

理想情况下，我想存储选择的旧行，这样我就不会在每次新选择时重置所有其他行，但如果我无法重置所有行，我会这样做。

P.S 我需要使用我提供的 id。我正在使用 interop 所以 id 来自外部.我所有的 tr 都注入(inject)了​​那个方法。

Answer 1

函数名称错误它的Highlight不是HighLight

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

在 each() 中，参数 elem 表示元素的索引，而不是元素本身。为索引引入另一个参数。

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>