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

问题描述 投票:1回答:5

我试图从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选定行,以便我不会在每个新选择中重置所有其他行,但如果我无法重置所有将执行此操作。

P.S我需要使用我所提供的id。我正在使用interop所以id来自外部。我所有的tr都注入了这种方法。

javascript jquery background-color onmousedown
5个回答
1
投票

功能名称是错误的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>

2
投票

这是一个快速的例子,说明你如何做到这一点。

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

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


2
投票

你可以有两个css类;一个用于选定行,另一个用于剩余行。单击该行,您可以将“selected”类添加到该行。

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

1
投票

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

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

0
投票

几个问题:

  • JS区分大小写,所以HighlightHighLight(大写字母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>
© www.soinside.com 2019 - 2024. All rights reserved.