Выделение строк gridview для полосатого gridview из флажка

В имеющейся у меня сетке я пытаюсь сделать так, чтобы, когда пользователь устанавливает флажок для строки, строка выделяется. Теперь этот GridView является полосатым (это означает, что четные строки имеют один цвет фона, а нечетные строки - другой). Этот код для этого плавает по сети в различных формах ...


var color = '';
function changeColor(obj) {
  var rowObject = getParentRow(obj);
  var parentTable = document.getElementById("gvCategories");
  if (color == ''){
    color = getRowColor();
  }
  if (obj.checked){
    rowObject.style.backgroundColor = 'Yellow';
  }
  else{
    rowObject.style.backgroundColor = color;
    color = '';
  }

  // private method
  function getRowColor(){
  if (rowObject.style.backgroundColor == '') return parentTable.style.backgroundColor;
  else return rowObject.style.backgroundColor;
  }
}

// This method returns the parent row of the object
function getParentRow(obj){
  do{
    obj = obj.parentElement;
  }
  while(obj.tagName != "TR")
  return obj;
}

Это прямая копия и вставка отсюда ... http://aspadvice.com/blogs/azamsharp/archive/2007/06/26/Highlight-GridView-Rows-Using-CheckBox.aspx

Это нормально, если ваш GridView не полосатый. Однако, как я упоминал ранее, у меня полосатая. Проблема здесь в том, что если вы снимете флажок в зависимости от порядка, в котором вы выбрали элементы, цвет фона строки может вернуться к неправильному цвету.

Я пробовал придумать какой-нибудь алгоритм, чтобы сделать это, но мне не повезло. Первоначально я подумал, что со стеком уловка, но я быстро понял, что для этого потребуется, чтобы пользователи снимали флажки в обратном порядке, в котором они проверяли элементы.

Единственное, что я могу придумать, это как-то проверить, является ли индекс строки нечетным или четным, и если он нечетный, вернуться к определенному цвету и даже вернуться к определенному цвету. Однако я не уверен, как проверить конкретные индексы gridview из javascript.

В конечном итоге я буду использовать для этого jQuery, поэтому любые советы относительно javascript с jquery или без него подойдут. Есть какие-нибудь идеи о том, как этого добиться?

Обновлено: Так что мне все равно не повезло, подумал выложу то, что у меня сейчас есть.


function highlightRow(object) {
    if ($(object).attr("checked") == true) {
        alert('is checked!'); // this will fire
        $(object).parent('tr').addClass("highlightedRow");
    }
    else {
        alert('is not checked!');
        $(object).parent('tr').removeClass("highlightedRow");
    }
}

Как говорится в комментарии, я могу сказать, проверяется ли элемент или нет, но переключатель класса просто не применяется. Выделенная строка объявляется после классов, которые она должна переопределить в файле CSS. Предоставляет ли это дополнительную информацию о том, что может пойти не так?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
4 231
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Я думаю, вам больше повезет с применением и удалением класса, который устанавливает цвет фона при установленном флажке. Таким образом, вы можете просто удалить класс, когда он не отмечен, и будет применен исходный CSS. Просто убедитесь, что «выделенный» класс появляется после других классов в вашем файле CSS, чтобы он переопределил их настройки. Это должно быть легко (проще) сделать с помощью jQuery.

Далее предполагается, что класс rowCheckbox был применен ко всем флажкам, но вы можете выбрать их, как хотите. Он полагается на класс highlight, определяемый для переопределения цвета фона для выбранных строк. Ваша обычная окраска строк также будет применяться через классы.

$(document).ready( function() {
    $('.rowCheckbox').click( function() {
       if (this.checked) {
           $(this).parent('tr').addClass('highlight');
       }
       else {
           $(this).parent('tr').removeClass('highlight');
       }
    });
});

Я чувствую, что у меня есть что-то похожее, но мне мало везет. Если у меня в основном этот код привязан к событию щелчка checkBox вместо этого события щелчка .rowCheckbox, можно ли с уверенностью сказать, что он все еще должен работать?

Carter 23.01.2009 04:42

.RowCheckbox - это просто селектор класса для выбора флажков, к которым добавляется обработчик событий щелчка. Если вы используете другой метод для прикрепления обработчика к флажку, он должен работать.

tvanfosson 23.01.2009 18:27

хм, спасибо, но все равно не повезло. Я скопировал ваш код именно сейчас. Я попытался добавить событие щелчка в код загрузки страницы позади, но, похоже, у меня нет доступа к элементу управления флажком, хотя он имеет runat = "server".

Carter 23.01.2009 20:17

Один из способов сделать это (может быть, не лучший) .... Вы можете изменить приведенный выше метод, чтобы использовать структуру, подобную `` хеш-таблице '', и сохранить идентификатор строки (tr) в соответствии с ее исходным цветом, чтобы, когда дело доходит до снятия флажка, вы могли затем найти его исходный цвет и установить это соответственно ...

Ответ принят как подходящий

Наконец-то у меня появилось время вернуться к этой проблеме, и я понял ее. Почему-то здесь этот бит ...

$(object).parent('tr')

не хватал ряд. Честно говоря, я не особо разбирался в причинах, поскольку это привело меня к реальной проблеме.

Что происходило, так это то, что уже установленный стиль цвета фона не переопределялся стилем, установленным с помощью ...

.addClass('highlight');

Таким образом, придание стилю фона класса «подсветка» важного тега помогло.

.SpatialDataHighlightedRow {
    background-color: #DDDDDD !important;
} 

Для меня это не сработало, пока я не сменил родителя на родителей:

       $(this).parents('tr').addClass('highlight');

С родителем он неправильно нашел tr

Другие вопросы по теме