Javascript基于html表中年龄列的值更改bgcolor

-1

我是JavaScript新手。我有一个表，如下的HTML：Javascript基于html表中年龄列的值更改bgcolor

FNAME LNAME AGE 
abc xyz 40 
sfd qwe 70 
ght tyu 65

我现在要的颜色在年龄栏，红色的背景下，如果值是>在年龄列的任意单元格60。我想用javascript来实现这一点。在上面的例子中，AGE列下的第2行和第3行应该变成红色。提前感谢您的帮助。

谢谢，希瓦Nagarajan

来源

2016-08-12 Siva Nagarajan

你尝试过什么？看来你会从教程中获益更多。 – 4castle

可以请您分享html代码，以便我可以为您编写javascript代码 – robinbansalsolutions

这里是使用jQuery的溶液。 jQuery代码是自我解释的。当年龄大于60时，它会使该值为红色。你可以用你的方式操纵它。

输出

守则

$(document).ready(function() { 
 
    $('table.empdata td.age').each(function() { 
 
    if ($(this).html() >= 60) 
 
     $(this).css({ 
 
     'color': 'red' 
 
     }); 
 
    else 
 
     $(this).css({ 
 
     'color': 'black' 
 
     }); 
 
    }); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <table class="empdata"> 
 
    <tbody> 
 
     <tr> 
 
     <th>FNAME</th> 
 
     <th>LNAME</th> 
 
     <th>AGE</th> 
 
     </tr> 
 
     <tr> 
 
     <td>abc</td> 
 
     <td>qwe</td> 
 
     <td class="age">70</td> 
 
     </tr> 
 
     <tr> 
 
     <td>sfd</td> 
 
     <td>xyz</td> 
 
     <td class="age">40</td> 
 
     </tr> 
 
     <tr> 
 
     <td>ght</td> 
 
     <td>tyu</td> 
 
     <td class="age">65</td> 
 
     </tr> 
 

 
    </tbody> 
 
    </table> 
 
</body> 
 

 
</html>

来源

2016-08-12 04:05:50

谢谢大家的所有回应。感谢您的帮助..我现在将尝试将这些内容加入到我的代码中，并让您知道它是否有效。 –

在ES6与jQuery

let tds = $('.age'); 
 

 
tds.filter((i, td) => 
 
    $(td).text() > 60).map((i, td) => $(td).css('background-color', 'red'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th>FNAME</th> 
 
     <th>LNAME</th> 
 
     <th>AGE</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>abc</td> 
 
     <td>xyz</td> 
 
     <td class="age">40</td> 
 
    </tr> 
 
    <tr> 
 
     <td>sfd</td> 
 
     <td>qwe</td> 
 
     <td class="age">70</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ght</td> 
 
     <td>tyu</td> 
 
     <td class="age">65</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

在ES5与jQuery

var tds = $('.age'); 
 

 
tds.map(function(index, td) { 
 
    $td = $(td); 
 
    if ($td.text() > 60) { 
 
    $td.css('background-color', 'red'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th>FNAME</th> 
 
     <th>LNAME</th> 
 
     <th>AGE</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>abc</td> 
 
     <td>xyz</td> 
 
     <td class="age">40</td> 
 
    </tr> 
 
    <tr> 
 
     <td>sfd</td> 
 
     <td>qwe</td> 
 
     <td class="age">70</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ght</td> 
 
     <td>tyu</td> 
 
     <td class="age">65</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

来源

2016-08-12 04:08:20 James

Javascript基于html表中年龄列的值更改bgcolor

回答

相关问题