JavaScript DOM：將屬性添加到<tr>

我想要創建一個解析我的HTML頁面的JavaScript函數，通過它的ID獲取表格，然後爲每個<tr>添加一個類屬性，就好像這行是第一行，我會添加：類=「LINE-1」到<tr> 但如果該行是第二個，我會添加class =「2號線」到<tr> 怎麼辦請JavaScript DOM：將屬性添加到<tr>

來源

2010-09-06 Marouane Gazanayi

你有沒有聽說過的jQuery？預計在接下來的20分鐘內將會有10次左右。 – jcolebrand 2010-09-06 07:11:54

不要讓他爲此包含使用JQuery。 – 2010-09-06 08:12:32

如果我正確地理解你，你想交替類名來獲得某種斑馬風格吧？

var table = document.getElementById('yourTableId'); 
var rows = table.rows; 
for(var i = 0, l = rows.length;i < l; i++) { 
    rows[i].className = 'class' + ((i%2) + 1); 
}

請參閱HTML DOM Table Object。

來源

2010-09-06 07:23:08

Yahoo！就是這樣，這是DOM？ – 2010-09-06 07:30:19

@taichimaro：是的，它是DOM。 – 2010-09-06 07:42:51

偉大的，gud工作..真正的程序員 – 2010-09-06 08:03:51

它在jQuery的非常簡單...如下： -

$(document).ready(function() { 
    //for table row 
    $("tr:even").addClass("AlternateBG1"); 
    $("tr:odd").addClass("AlternateBG2"); 
})

但JQUERY ...

來源

2010-09-06 07:20:50

沒有要求提供jQuery解決方案。 – James 2010-09-06 08:35:41

-1

使用jQuery是非常簡單的，做這樣的事情：

var i = 1; 
$("#myTable tr").each(function() { 
    $(this).addClass("line"+i); 
    i++; 
});

哪裏#myTable是你的表id和$（本）內的各功能將是循環中的當前元素。

來源

2010-09-06 07:21:07

這是一個使用javascript工作的義務，不得使用任何API。 – 2010-09-06 07:22:31

我已經投票迴應了你的答案，因爲「只是用jQuery」的態度，每個人似乎都堅持擁有。顯然沒有什麼個人特徵，但現在它已經非常令人討厭了，而且在如此簡單的場景中，這是非常不必要的。 – Rob 2010-09-06 07:31:34

另外，這甚至沒有利用每個'tr'索引作爲第一個參數傳遞給'each'回調的事實。 – James 2010-09-06 08:32:41

這是不容易的jQuery：

oTBody=document.getElementById("tBodyId"); 
//for (key in oTbody.childNodes) { 
for (var nPos=0, nLength = oTbody.childNodes.length; nPos<nLegth; nPos++)} 
    oRow = oTbody.childNodes[nPos]; 
    if (oRow && oRow.tagName && oRow.tagName.toLowerCase() == "tr") { 
     oRow.className = (bNormalRow? sClass1:sClass2); 
     bNormalRow = !bNormalRow; 
    } 
}

來源

2010-09-06 07:28:55 pkario

不要使用'for（i in foo）'循環爲類似數組的結構（例如NodeLists）。它很慢（非常慢），並可能導致非相關項目被循環（如果'NodeList'的原型鏈中的任何原型已被操縱）。 – James 2010-09-06 08:31:38

對。選定的答案有正確的方法。 – pkario 2010-09-06 12:06:40

var table = document.getElementById("yourTableId"); 
for(var i in table.rows){ 
    table.rows[i].className = 'line'+(i+1).toString(); 
}

來源

2010-09-06 07:30:59 Anpher

不要對類似數組的結構（例如NodeLists）使用'for（i in foo）'循環。它很慢（非常慢），並可能導致非相關項目被循環（如果'NodeList'的原型鏈中的任何原型已被操縱）。 – James 2010-09-06 08:34:33

JavaScript DOM：將屬性添加到<tr>

回答

相關問題