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

在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; 
}

这是一个直接复制并从这里粘贴... http://aspadvice.com/blogs/azamsharp/archive/2007/06/26/Highlight-GridView-Rows-Using-CheckBox.aspx

这是好的，如果你的GridView没有条纹。但是，正如我前面提到的，我的是有条纹的。这里的问题是，如果取消选中某个框，具体取决于所选项目的排序，那么行背景颜色可以恢复为不正确的颜色。

我试过想做一些算法来做到这一点，但我有幸运。我最初的想法是有一些小窍门，但我很快意识到，要求用户取消选中他们检查项目的相反顺序。

我能想到的是某种检查，如果行索引是奇数还是偶数，和唯一的其他东西，如果它是奇怪恢复到一个特定的颜色，如果它甚至恢复到一个特定的颜色。但是，我不知道如何检查从JavaScript的GridView的具体索引。

我最终将要使用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文件中应该覆盖的类之后声明的。这是否提供了关于可能出错的额外信息？

来源

2009-01-23 Carter

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

$(object).parent('tr')

并没有抓住行。我真的没有调查很多为什么因为这导致我真正的问题。

发生了什么事是在已经设置背景颜色的造型并没有被造型重写通过设定...

.addClass('highlight');

因此，给“亮点”阶级背景造型的重要标记并获得成功。

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

来源

2009-02-18 23:41:29 Carter

我觉得你有更好的运气施加移除一类设置背景颜色，当复选框被选中。这样，您可以简单地移除未经检查的类，并应用原始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'); 
     } 
    }); 
});

来源

2009-01-23 01:07:46 tvanfosson

我觉得我有一些类似的但我很幸运。如果我基本上已将代码绑定到checkBox单击事件而不是该.rowCheckbox单击事件，是否可以安全地说它仍然可以工作？ – Carter 2009-01-23 01:42:35

一种方式做到这一点（未必是最好的方式）.... 您可以修改上面的方法，让你使用一个“哈希表”状结构，并存储该行的ID （tr）与原来的颜色，所以当取消选中复选框时，您可以查找其原始颜色并相应地设置它...

来源

2009-01-23 01:13:03 Jobo

对我来说，没有工作，直到我改变了父母的父母：

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

与父母并没有找到正确的TR

来源

2010-09-30 18:43:49 salonMonsters

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

回答

相关问题