выделение строк вида сетки для чередующегося вида сетки из флажка

Question

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

Answer 1

Я думаю, вам лучше повезет, применяя и удаляя класс, который устанавливает цвет фона, когда флажок установлен. Таким образом, вы можете просто удалить класс, когда он не отмечен, и будет применен оригинальный 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');
       }
    });
});

Answer 2

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

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

С родителем не удалось правильно найти tr

Answer 3

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

$(object).parent('tr')

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

То, что происходило, было то, что уже установленный стиль фона не был переопределен стилем, установленным через ...

.addClass('highlight');

Итак, придание стилю фона 'highlight' важному тегу помогло.

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

Answer 4

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