从复选框突出显示条纹gridview的gridview行答案

【问题标题】：highlighting gridview rows for striped gridview from checkbox从复选框突出显示条纹gridview的gridview行
【发布时间】：2010-10-03 01:23:01
【问题描述】：

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

【问题讨论】：

标签： javascript jquery gridview checkbox

【解决方案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');
       }
    });
});

【讨论】：

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

【解决方案2】：

对我来说，直到我将父母改为父母后，它才起作用：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

$(object).parent('tr')

没有抓住这一行。老实说，我并没有对原因进行太多调查，因为这导致了我真正的问题。

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

.addClass('highlight');

因此，给“highlight”类背景样式赋予重要标签就可以了。

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

【讨论】：