Изменение стиля на основе содержимого ячейки

Question

У меня есть таблица, например, так:

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

Использование Javascript, как я могу найти таблицу и изменить элемент стиля (например backgroundColor) на основе содержимого ячейки (например, сделать цвет фона всех ячеек со словом «один» в них красным)?

Спасибо!

Answer 1

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"; 
} 

Answer 2

Вот код, который выполняет поиск в таблице и устанавливает цвет фона для всех ячеек, содержимое которого является «одним». Я предполагаю, что вы можете приспособить это, чтобы проверить для других значений:

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/

Answer 3

Использование 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"; 
    } 
} 

Примечание. Это будет соответствовать слову «один» в любой точке ячейки.

Here it is in action on jsFiddle.

Answer 4

Кроме того, jQuery пример (для полноты картины)

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

Демо: http://jsbin.com/ulexub

Answer 5

Зачем использовать Javascript, чтобы сделать это? Вместо этого поставьте таблицу с ячейками, имеющими соответствующий класс, например.

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

Затем просто используйте CSS для стилизации содержимого по своему усмотрению.

Если вам действительно нужно использовать Javascript, вам необходимо изучить DOM. Есть различные ссылки на линии, например http://www.howtocreate.co.uk/tutorials/javascript/domstructure

Answer 6

Я хотел динамическое решение, основанное на стоимости и сделал это

$('.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'); 
     } 
    });