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



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Я думаю, вам больше повезет с применением и удалением класса, который устанавливает цвет фона при установленном флажке. Таким образом, вы можете просто удалить класс, когда он не отмечен, и будет применен исходный 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');
}
});
});
.RowCheckbox - это просто селектор класса для выбора флажков, к которым добавляется обработчик событий щелчка. Если вы используете другой метод для прикрепления обработчика к флажку, он должен работать.
хм, спасибо, но все равно не повезло. Я скопировал ваш код именно сейчас. Я попытался добавить событие щелчка в код загрузки страницы позади, но, похоже, у меня нет доступа к элементу управления флажком, хотя он имеет runat = "server".
Один из способов сделать это (может быть, не лучший) .... Вы можете изменить приведенный выше метод, чтобы использовать структуру, подобную `` хеш-таблице '', и сохранить идентификатор строки (tr) в соответствии с ее исходным цветом, чтобы, когда дело доходит до снятия флажка, вы могли затем найти его исходный цвет и установить это соответственно ...
Наконец-то у меня появилось время вернуться к этой проблеме, и я понял ее. Почему-то здесь этот бит ...
$(object).parent('tr')
не хватал ряд. Честно говоря, я не особо разбирался в причинах, поскольку это привело меня к реальной проблеме.
Что происходило, так это то, что уже установленный стиль цвета фона не переопределялся стилем, установленным с помощью ...
.addClass('highlight');
Таким образом, придание стилю фона класса «подсветка» важного тега помогло.
.SpatialDataHighlightedRow {
background-color: #DDDDDD !important;
}
Для меня это не сработало, пока я не сменил родителя на родителей:
$(this).parents('tr').addClass('highlight');
С родителем он неправильно нашел tr
Я чувствую, что у меня есть что-то похожее, но мне мало везет. Если у меня в основном этот код привязан к событию щелчка checkBox вместо этого события щелчка .rowCheckbox, можно ли с уверенностью сказать, что он все еще должен работать?