Javascript 从复选框高亮显示条带化gridview的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;
}

这是一个直接的复制和粘贴从这里。。。

如果您的GridView没有条带化，这很好。然而，正如我前面提到的，我的是条纹的。这里的问题是，如果根据所选项目的顺序取消选中某个框，行背景颜色可能会恢复为不正确的颜色

我试着想出一些算法来做到这一点，但运气不好。我最初的想法是使用堆栈进行一些欺骗，但我很快意识到这需要用户按与检查项目相反的顺序取消选中

我唯一能想到的另一件事是检查行索引是奇数还是偶数，如果是奇数，则还原为特定颜色，如果是偶数，则还原为特定颜色。但是，我不知道如何从javascript检查gridview的特定索引

我最终将使用jQuery来实现这一点，因此任何关于使用或不使用jQuery的javascript的建议都可以。关于如何实现这一点有什么想法吗

编辑：所以我仍然没有任何运气，我想我应该发布我目前拥有的

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文件中应该覆盖的类之后声明。这是否提供了任何关于可能出现问题的额外信息

我认为，如果选中复选框，则应用和删除设置背景色的类会更好。这样，您可以在取消选中该类时简单地删除该类，并应用原始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');
       }
    });
});

一种方法（可能不是最好的方法）。。。。

---

您可以修改上面的方法，以便使用类似“哈希表”的结构，并根据其原始颜色存储行的ID（tr），以便在取消选中复选框时，您可以查找其原始颜色并相应地进行设置…

我终于有时间回到这个问题上，并找到了答案。出于某种原因，这里的这一点

$(object).parent('tr')

他没有抓住那一排。老实说，我没有调查太多的原因，因为这让我找到了真正的问题

发生的事情是，已经设置的背景色样式没有被通过设置的样式覆盖

.addClass('highlight');

因此，给“highlight”类背景样式添加重要标记就成功了

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

---

对我来说，直到我把父母换成了父母，这才起作用：

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

---

对于家长，它没有正确定位tr

我觉得我有类似的东西，但我运气不好。如果我基本上将该代码绑定到复选框单击事件而不是.rowCheckbox单击事件，那么可以安全地说它仍然可以工作吗？.rowCheckbox只是一个类选择器，用于选择将单击事件处理程序添加到其中的复选框。如果您使用不同的方法将处理程序附加到复选框，它应该会起作用。嗯，谢谢，但还是不走运。我现在已经把你的代码复制好了。我已尝试在页面加载代码中添加click事件，但似乎我无法访问其中的复选框控件，即使它已运行at=“server”。