切換錶行的類

我正在嘗試編寫一個JavaScript，它將在onClick事件中切換錶行的類，以便我可以使用css來更改它的外觀和功能，但是我並不完全確定如何做到這一點。切換錶行的類

目標是建立一個表格，用戶可以在其中選擇一行並使其突出顯示，並且如果他們選擇另一行，則先前的選擇將返回到其原始類別。表格行具有交替的顏色，我不確定如何按照我喜歡的方式使其工作。

3 CSS類是： EVN 奇數選擇

甲行只能是2的1：預先

<script> 
function toggle(elem) { 
    selectClass = 'selected'; 
    orgClass = document.getElementById(elem).className; 
    elem.className = (elem.className == 'selectClass)?orgClass:selectClass; 
} 
</script> 
<table> 
<tr class='evn' id=0 name='rowsel' tabindex=0 onClick='toggle(this);'> 
    <td>something</td> 
    <td>something else</td> 
</tr> 
<tr class='odd' id=1 name='rowsel' tabindex=0 onClick='toggle(this);'> 
    <td>something</td> 
    <td>something else</td> 
</tr> 
<tr class='evn' id=2 name='rowsel' tabindex=0 onClick='toggle(this);'> 
    <td>something</td> 
    <td>something else</td> 
</tr> 
</table>

感謝。

來源

2010-10-06 Mose

我不喜歡它，當人們用jQuery答案回答JavaScript問題時，所以我勾選了他，但Paniyar是正確的，做這樣的事情很容易（或者至少更簡潔）如果您使用[jQuery]（http://jquery.com），[Prototype]（http://prototypejs.org），[Closure]（http://code.google.com/closure/library），或[其他幾種]（http://en.wikipedia.org/wiki/List_of_JavaScript_libraries）。可能值得一試。（這些名稱是鏈接，順便說一句，stoopid SO製作鏈接的政策太微妙，發牢騷，咆哮......） – 2010-10-06 09:26:01

設置ID我想你需要：

從先前選定的元素中刪除所選類（如果它被設置）
將其添加到當前選擇。

這樣的事情會做到這一點：

function toggle(elem) { 
     var allelems = document.getElementsByClassName("odd"); 
     for (var i = 0; i < allelems.length; i++) 
     { 
      allelems[i].className = allelems[i].className.replace("selected", ""); 
     } 
     var allelems = document.getElementsByClassName("evn"); 
     for (var i = 0; i < allelems.length; i++) 
     { 
      allelems[i].className = allelems[i].className.replace("selected", ""); 
     } 

     elem.className += " selected"; 
    }

以上可以被無限提升！它的工作原理，但更多地將其視爲僞代碼來說明。

來源

2010-10-06 08:51:56

您先生，是男人 – Mose 2010-10-06 09:57:21

請勿用selected替換odd或evn類。一個元素可能有多於一個類，所以添加selected類，這樣您在選擇時就會有odd selected，只有在未選中時纔會有odd。在className屬性上使用indexOf來查看元素是否具有selected類。用+= ' selected'加上它並用replace將其刪除。

請注意，這需要您稍微更改您的類定義selected，但這是正確的方式來執行您所需的操作。

來源

2010-10-06 07:50:29

通過使用jquery它的簡單。

$("tr").removeClass("selected"); // Removes 'selected' class from all tr element 
$("#id2").addClass("selected"); // adds 'selected' class to #id2 element

欲瞭解更多信息addclass，remove class

編輯

沒有使用jQuery你可以像如下。

function toggle(elem){ 
    trele=document.getElementById('tblid').getElementsByTagName('TR'); 
    var classname; 
    for(var i=0;i<trele.length;i++) 
    { 
    classname=trele[i].className; 
    trele[i].className=classname.replace("selected",""); 
    } 
    elem.className+=' selected'; 
}

注：您表作爲tblid

來源

2010-10-06 07:51:07 ArK

http://api.jquery.com/toggleClass/似乎更適合於jquery :) – 2010-10-06 07:53:33

然而，需要jQuery。 – Jochem 2010-10-06 07:54:20

@Martijn：toggleClass是棘手的，因爲它假定某個狀態並切換它。但是如果你選擇了一行兩次呢？ addClass + addClass = addClass，但是toggleClass + toggleClass = 0 :-D – Jochem 2010-10-06 07:56:47

切換錶行的類

回答

相關問題