验证html表中的数据并相应地为单元格着色

时间:2013-07-22 14:26:18

标签: javascript jquery html

我有一个像这样的html表来自动验证从一些土壤污染物分析中收到的数据:

<table id="table1">
  <thead class="fixedHeader">
<tr><input type="submit" value=" Validate "/><input type="reset"value="réinitialiser" "></tr> 
</thead>
   <tbody id="form1" class="scrollContent">
<tr>
   <td>COT</td>
   <td><input type="text" class="cellData" name="celula1" id="celula1" value="" /</td>
   <td>mg/kg</td>
   <td id="soilMessage1" class="y_n" ></td>
</tr>
<tr>
   <td>HCT C10-C40</td>
   <td><input type="text" class="cellData" name="celula2" id="celula2" value="" /></td>
   <td><p>mg/kg</p></td>
   <td id="soilMessage2" class="y_n"></td>
</tr>
</table>

这是37个单元格,但我只发了两个给你一个ideea。 现在我试图根据从这个小脚本获得的结果为单元格“soilMessageX”的背景着色:

window.onload=function() {
document.getElementById("form1").onsubmit=function() 
   {
    var celula1 = parseInt(this.celula1.value,10); 
    celula2 = parseInt(this.celula2.value,10);
       {
var text1 ;  
 if (celula1 <= 399)  text1 = "FNADE Classe 3"; 
  else if (celula1 >= 400 && celula1 <= 1800) text1 = "FNADE Classe 2";  
  else if (celula1 >= 1801) text1 = "FNADE Classe 1" ;
  else text1 = "SVP inserez des donnes";
   document.getElementById("soilMessage1").innerHTML=text1; 
var text2 ; 
 if (celula2 <= 499) text2 = "FNADE Classe 3";  
  else if (celula2 >= 500 && celula2 <= 2000) text2 == "FNADE Classe 2";  
  else if (celula2 >= 2001 && celula2 >= 10000) text2 == "FNADE Classe 1";
  else if (celula2 > 10000 ) text4 = "Concentration trop élevée";
  else text2 = "SVP inserez des donnes";
   document.getElementById("soilMessage2").innerHTML=text2;
return false  
    }
    }   
     } ;

这也持续了37个细胞。 (如果你能给我一个关于如何简化这个的想法,我也会很感激,但这不是主要的事情)。

我尝试使用此脚本来更改答案单元格的颜色:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script  type="text/javascript">
$(document).ready(function() {
$("#form1 td.y_n:contains('FNADE Classe 3')").css('background-color','#fcc');
 });
</script>

但没有结果。

有人可以赐教吗? 谢谢

1 个答案:

答案 0 :(得分:0)

您可以在y_n单元格中循环并相应地执行操作:

$('#table1 td.y_n').each(function () {
    // 'this' is the cell so you can do your checks and then
    $(this).css(...);
});