從復選框突出顯示帶區格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');
       }
    });
});

Answer 2

對我而言，直到我將父母改為父母后，它才起作用：

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

與父母一起無法正確找到tr

Answer 3

一種方法（可能不是最好的方法）。...您可以修改上面的方法，以便使用類似結構的“哈希表”，並根據其原始顏色存儲行（tr）的ID，以便取消選中該復選框時，您可以查找其原始顏色並進行相應設置...

Answer 4

我終於有時間回到這個問題上，並且我弄清楚了。 由於某種原因，這里有點...

$(object).parent('tr')

沒有抓住那排。 老實說，我沒有對此進行太多調查，因為這使我想到了真正的問題。

發生的事情是，已設置的背景顏色樣式沒有被通過...設置的樣式所覆蓋

.addClass('highlight');

因此，給“突出顯示”類的背景樣式添加重要標記就可以了。

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