如何在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元素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>