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没有条带化，这很好。但是，正如我之前提到的，我的是条纹。这里的问题是，如果您取消选中一个框，具体取决于您选择项目的顺序，行背景颜色可以恢复为不正确的颜色。

我已经尝试过一些算法来做这件事，但我没有运气。我最初的想法是堆栈的一些诡计，但我很快意识到这将要求用户以他们检查项目的相反顺序取消选中。

我能想到的另一件事是以某种方式检查行索引是奇数还是偶数，如果它是奇数还原为特定颜色，如果它甚至还原为特定颜色。但是，我不确定如何从javascript检查gridview的特定索引。

我最终将使用jQuery，因此任何有关javascript或不带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');
       }
    });
});

Answer 2

对我来说，直到我将父母换成父母才行不通：

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

对于父级，它没有正确找到tr

Answer 3

一种方法（可能不是最好的方式）.... 您可以修改上面的方法，以便使用类似结构的“哈希表”，并将行（tr）的ID与其原始颜色一起存储，因此当取消选中该复选框时，您可以查找其原始颜色并设置因此......

Answer 4

我终于有时间回到这个问题，我想出来了。出于某种原因，这里有点......

$(object).parent('tr')

没有抓住这一排。老实说，我没有深入研究为什么因为这导致了我真正的问题。

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

.addClass('highlight');

因此，给予'突出'类背景样式重要的标记就可以了。

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

从复选框突出显示条带网格视图的gridview行

4 个答案: