如何突出顯示中繼器選定的行？

我有一箇中繼器，我只是想當我選擇或點擊它的任何一行然後將突出顯示。我試過的JavaScript的一些代碼，使選定行高亮顯示，但不unhighlighting選擇當任何其他row.My代碼： -如何突出顯示中繼器選定的行？

<tr id="gh" style="cursor: pointer" onclick="Select(this);">

任何JavaScript的和風格的代碼： -

<style type="text/css"> 
    .highlight 
    { 
     background-color: Red; 
    } 
    .selected 
    { 
     background-color: #ffdc87; 
    } 
</style> 

<script type="text/javascript"> 
    function Select(obj) { 
     obj.className = 'selected'; 
     var tbl = document.getElementById("Repaddressorbbl") 
     var firstRow = tbl.getElementsByTagName("TR")[0]; 
     var tableRowId = tbl.rows[firstRow.getElementById("gh").parentNode.id]; 
     alert(tableRowId); 
     var oldRow = tbl.rows[firstRow.getElementsByTagName("tr")[0].value]; 
     if (oldRow != null) { 
      oldRow.className = ''; 
     } 
     firstRow.getElementsByTagName("tr")[0].value = obj.rowIndex; 

    } 

</script>

我們可以簡單地使用代碼來做到這一點，但問題是隻能用jQuery或JavaScript來完成。

來源

2011-11-11 Ram Singh

您可以使用類似的代碼如下：

var INDEX = $(this).parent().children().index($(this)); 
$('#Repaddressorbbl tr:nth-child(' + INDEX + ')').addClass("highlight") 
         .siblings() 
         .removeClass("highlight"); // remove css class from other rows

它得到了TR的ROWNUMBER並同時去除所有其他的TR同一類增加了一個CSS類。

來源

2011-11-11 10:56:22 Pieter

爲什麼你需要的指數？你不能只是說'$（this）.addClass（「highlight」）。siblings（）。removeClass（「highlight」）;'如果'this'是'tr'，你可以直接得到索引而不用jQuery說'this.rowIndex'。（順便說一下，這個問題沒有用jQuery標記。） – nnnnnn

你是對的，你並不需要索引。雖然這個問題沒有相應的標記，但這確實爲解決這個問題提供了一個簡單的解決方案，所以OP可能想要使用它，或者不知道jQuery的能力。 – Pieter

那麼這似乎工作：問題已被更新爲包括jQuery。我希望你不介意，但我已經相應地更新了我的答案。 – nnnnnn

更新的jQuery：

$(document).ready(function() { 
    $("tr").click(function() { 
     $(this).addClass("highlight").siblings().removeClass("highlight"); 
    } 
}

原來的答覆：

如果我理解正確的話，所有的錶行的定義是這樣的：

<tr id="gh" style="cursor: pointer" onclick="Select(this);">

而且你要設置最近點擊過的行上的一個類，使其看起來被選中，同時從先前單擊的/選擇的行中清除所述類？

如果是這樣，你的功能的大大簡化版本應該這樣做：

var selectedRow = null; 

function Select(obj) { 
    if (obj != selectedRow) { 
     if (selectedRow != null) { 
     selectedRow.className = ''; 
     } 
     obj.className = 'selected'; 
     selectedRow = obj; 
    } 
}

我不明白你在試圖與firstRow.getElementsByTagName("tr")東西做什麼。你有嵌套表嗎？

來源

2011-11-11 10:56:57 nnnnnn

其中有幾個表可見condition.Sir你的代碼不工作選擇每一行我點擊。但不能刪除類。 –

好的，很抱歉，但是也許你可以在你的問題中明確指出有多個表。這些表是否嵌套？請顯示更多的HTML。您的意圖是每張桌子都有自己的獨立突出顯示嗎？如果是的話，我的jQuery版本應該已經這樣做了。如果你只想在一張表中突出顯示，那麼將「tr」選擇器改爲「#id_of_table tr」。至於非jQuery版本，我不會建議對其進行更改，直到我明白您希望多個表的工作方式。 – nnnnnn

我添加了一個功能，選擇與特定的類名的元素，所以你可以伊斯利搜索元素的DOM與該類

onload=function(){ 
    if (document.getElementsByClassName == undefined) { 
     document.getElementsByClassName = function(className) 
     { 
      var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)"); 
      var allElements = document.getElementsByTagName("*"); 
      var results = []; 

      var element; 
      for (var i = 0; (element = allElements[i]) != null; i++) { 
       var elementClass = element.className; 
       if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass)) 
        results.push(element); 
      } 

      return results; 
     } 
    } 
} 
function Select(obj) { 
    var oldRow = document.getElementsByClassName('selected'); 
    if(oldRow.length > 0) 
     oldRow[0].className = ''; 
    obj.className = 'selected'; 
}

來源

2011-11-11 10:58:18

如何突出顯示中繼器選定的行？

回答

相關問題