javascript - 从复选框突出显示条纹 GridView 的 GridView 行

Question

在我拥有的 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 不是条纹的，这很好。然而，正如我之前提到的，我的是条纹的。这里的问题是，如果您根据选择项目的顺序取消选中某个框，则行背景颜色可能会恢复为不正确的颜色。

我试过想一些算法来做到这一点，但我运气不佳。我最初的想法是使用堆栈进行一些诡计，但我很快意识到这将要求用户以与他们检查项目相反的顺序取消检查。

我唯一能想到的另一件事是以某种方式检查行索引是奇数还是偶数，如果它是奇数则恢复为特定颜色，如果它甚至恢复为特定颜色。但是，我不确定如何从 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 文件中覆盖的类之后声明。这是否提供了有关可能出现问题的任何额外信息？

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');
       }
    });
});