改變風格元素

我有一個表，像這樣：改變風格元素

<table> 
    <tr> 
    <td>one</td> 
    <td>two</td> 
    </tr> 
    <tr> 
    <td>three</td> 
    <td>one</td> 
    </tr> 
</table>

使用JavaScript，我怎麼可以搜索該表並更改基於單元格的內容的樣式元素（如backgroundColor）（例如，使所有單元格中的單詞'one'的背景顏色變成紅色）？

謝謝！

來源

2012-01-04 user1129274

DEMO

var allTableCells = document.getElementsByTagName("td"); 

for(var i = 0, max = allTableCells.length; i < max; i++) { 
    var node = allTableCells[i]; 

    //get the text from the first child node - which should be a text node 
    var currentText = node.childNodes[0].nodeValue; 

    //check for 'one' and assign this table cell's background color accordingly 
    if (currentText === "one") 
     node.style.backgroundColor = "red"; 
}

來源

2012-01-04 06:09:29

謝謝你，這是完美的！我會盡快回復，但我不得不在OpenDNS上大喊大叫。 – user1129274 2012-01-04 07:22:52

這是代碼，用於搜索表格並設置內容爲「one」的所有單元格的背景顏色。我想你能適應這種檢查其他值：

var cells = document.getElementById("test").getElementsByTagName("td"); 
for (var i = 0; i < cells.length; i++) { 
    if (cells[i].innerHTML == "one") { 
     cells[i].style.backgroundColor = "red"; 
    } 
}

與此HTML：

<table id="test"> 
    <tr> 
    <td>one</td> 
    <td>two</td> 
    </tr> 
    <tr> 
    <td>three</td> 
    <td>one</td> 
    </tr> 
</table>

而且這裏的工作演示：http://jsfiddle.net/jfriend00/Uubqg/

來源

2012-01-04 06:08:17 jfriend00

使用getElementsByTagName()返回細胞，並匹配在他們的innerText屬性中的文字：

var tds = document.getElementById("table-id").getElementsByTagName("td"); 
var num_tds = tds.length; 
for (var i = 0; i < num_tds; i++) { 
    if (tds[i].innerText.indexOf("one") > -1) { 
    tds[i].style.backgroundColor = "red"; 
    } 
}

注意：這將匹配單元格中任何位置的單詞「one」。

Here it is in action on jsFiddle.

來源

2012-01-04 06:08:35

此外，（全圖）一個jQuery例如

$.each($('td'), function() { 
    if($(this).html() == 'one') { 
    $(this).css('background-color', 'red'); 
    } 
});

演示：http://jsbin.com/ulexub

來源

2012-01-04 06:09:33

爲什麼使用Javascript功能來做到這一點？而是用具有適當類別的單元格遞送該表格，例如

<td class="oneCell">One</td>

然後，只要使用CSS來設置您認爲合適的內容的樣式。

如果您確實需要使用Javascript，則需要查看DOM。有在網上各種參考，例如http://www.howtocreate.co.uk/tutorials/javascript/domstructure

來源

2012-01-04 06:09:38

爲什麼使用Javascript來做到這一點？因爲有時候你不知道表格單元中會出現什麼，或者你想要搜索什麼。例如，讓用戶搜索表格並突出顯示與輸入文本匹配的單元格。 – 2012-01-04 06:12:45

真的 - 服務器或Javascript的某些部分需要將數據放入單元格中 - 因此可以設置類。 – 2012-01-04 06:16:20

但是你不能爲每個可能的單元格值創建一個類名稱。 – 2012-01-04 06:18:38

我想要一個動態的解決方案基於價值，這樣做，

$('.dataframe td').each(function(){ 
     var num = parseFloat($(this).text()); 
     if (num > 0) { 
      $(this).addClass('success'); 
      //$(this).css('color','Green'); 
     } else if (num < 0) { 
      $(this).addClass('danger'); 
      //$(this).css('color','Red'); 
     } 
    });

來源

2017-01-08 20:00:38 citynorman

改變風格元素

回答

相關問題