Как изменить цвет выбранной строки в событии onmousedown - PullRequest
Новая
       39

Как изменить цвет выбранной строки в событии onmousedown

0 голосов
/ 15 февраля 2019

Я пытаюсь изменить цвет выбранной строки из таблицы для события 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, так что идентификатор исходит из внешнего источника.Все мои tr имеют этот метод, введенный в них.

Ответы [ 5 ]

0 голосов
/ 15 февраля 2019

Вы можете сделать это так. С помощью класса вы можете выполнять другие операции 

$("#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 голосов
/ 15 февраля 2019

Вы можете иметь два класса 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>
0 голосов
/ 15 февраля 2019

Несколько проблем:

  • 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. Заменить код jQuery на VanillaJS 

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>
0 голосов
/ 15 февраля 2019

Имя функции неверно: Highlight не HighLight

Чтобы передать идентификатор элемента при вызове функции, вы не можете просто передать любую переменную ( e в вашем случае ),Используйте this.getAttribute('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>
0 голосов
/ 15 февраля 2019

Вот краткий пример того, как вы можете это сделать. 

$("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, здесь аналогичная функция, но вместо добавления и удаления класса ееделает то же самое со свойством inline 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>

Но я не рекомендую второе решение.

...