表中的条件格式值

时间:2015-04-23 14:58:40

标签: javascript html

我正在尝试为表中的值设置一些条件格式。例如,我有2列,1行,所以2个值(每个td 1)。我试图将表中包含文本“红色”的行中任何值的字体颜色设置为红色。

我似乎没有收到错误。

解决: 最终守则:

<?!= include('script_js'); ?>
  <? var data = getData(); ?>
<TABLE id="X">

<tbody>
<? for (var i = 0; i < data.length; i++) { ?>
<tr>
  <? for (var j = 0; j < data[i].length; j++) { ?>
    <td><?= data[i][j] ?></td>
  <? } ?>
</tr>
<? } ?>

 <style>

 table {
 border-collapse: collapse;
  width: 100%;
  background-color: #EEEEEE;
  font-family:arial
        }

 tr {
 border: 1px solid #DDDDDD;
 width: 110%;
    }    

  </style>

</tbody>
</TABLE>
<?!= include('script_rag'); ?>

script_rag:

<script>
        var table = document.getElementById("X");
        for (var i = 0, row; row = table.rows[i]; i++) {
            for (var j = 0, col; col = row.cells[j]; j++) {    
                if (col.innerText == "RED") { 
                    col.style.backgroundColor = "#f00";
             }
            else
              if (col.innerText == "GREEN") { 
                    col.style.backgroundColor = "#8CC10C";
                    }

            else
              if (col.innerText == "AMBER") { 
                    col.style.backgroundColor = "#FFBF00";
                  }
            }
         }
</script>

2 个答案:

答案 0 :(得分:0)

您希望document.getElementById("Red").setAttribute("style","color:red");将表格的tds的字体颜色设置为红色?

同样@skirator问道,你能告诉我们你的桌子吗?

答案 1 :(得分:0)

我并不完全理解你要通过将每个数据传递到这样的函数来实现的目标,但如果情况是你有一个表,并且表中的每个单元格都可能包含单词“red” “那么我会喜欢这样。

var cells = document.getElementById("#id_of_your_table").getElementsByTagName("td"); //This is an array of the cells (td's)

for (var i = 0; i < cells.length; i++) {
    if (cells[i].indexOf('Red')) {
        cells[i].css('background-color', 'red')
    }

}

在创建表格后尝试此脚本

<script>
            var table = document.getElementById("table1");
            for (var i = 0, row; row = table.rows[i]; i++) {
                for (var j = 0, col; col = row.cells[j]; j++) {    
                    if (col.innerText == "Red") { // You might want to look at other solutions in case the TD should contain more than just "Red"
                        col.style.backgroundColor = "#f00";
                    }
                }
            }
        </script>