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

Question

我正在尝试更改 onmousedown 事件中 table 和所有其他 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 选定的行，这样我就不会在每次新选择时重置所有其他行，但如果我无法重置所有行，我会这样做。

P.S 我需要用 id 来弥补 provided.I 我正在使用 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>

这是它的工作原理：

它将 click 事件绑定到 table (tr) 中的每一行，
每次单击一行时，所有具有名为 highlighted 的 class 的元素都会松开它，并且您单击的行会得到 class highlighted，

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

如果您不想使用 css，这里有一个类似的函数，但不是添加和删除 class，而是对内联 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

几个问题：

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>

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

不要在你的 JS 代码中使用样式，而是为 CSS
不使用HTMLonmousedown属性，而是JSaddEventListeners
用 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>

Answer 3

函数名是错误的 Highlight 不是 HighLight

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

在 each() 中，元素的参数 elem represented the index 而不是元素本身。为 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

你可以有两个 css class；一个用于选定的行，另一个用于剩余的行。单击该行，您可以将 "selected" class 添加到该行。

$("#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 5

你可以像this.by一样使用class你可以进行其他操作

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

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

How to change color of selected row on onmousedown event

javascript

jquery

onmousedown

background-color

这是它的工作原理：