How can I change the class of TD table. After the page loads?
Question
Okay I have an HTML page. Inside this page I have a table with rows and columns. For each TD element. I have an "idnum" attribute. Now I also have one ARRAY. In this ARRAY I have 3 objects. More accurate 3 numbers. With a good look, look at the numbers that match the numbers in the table. Now I want each object in the table whose number is in ARRAY. Will get a straight red background color. More accurate that the object of another class. Who has an idea how can I solve this? Thank you all.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.numeric.js"></script>
<script type="text/javascript">
</script>
<title></title>
<style type="text/css">
td:hover{
color: red;
}
.class1{
}
.class2{
background-color: red;
}
</style>
</head>
<body>
<table>
<tr>
<th>test</th>
<td class="class1" idnum="111">TD1</td>
<td class="class1" idnum="222">TD2</td>
<td class="class1" idnum="333">TD3</td>
</tr>
</table>
<h1 id="content"></h1>
<script type="text/javascript">
$(document).ready(function(){
var array1 = ["111","222","333"];
for(var i = 0; i<array1.length; i++){
$("#content").append(i+"-->"+array1[i] + "</br>" );
var count = array1[i];
var td = $("*").find("td").attr("idnum");
if(td == array1[i]){
$(this).toggleClass("class2");
}
}
});
$(document).ready(function(){
$(".class1").on("click", function(){
$(this).toggleClass("class2");
var idnum = $(this).attr("idnum");
alert("idnum is " + idnum);
})
})
</script>
</body>
</html>
1 answers
solution1
1 ACCPTED 2017-05-01 17:01:46
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.numeric.js"></script>
<script type="text/javascript">
</script>
<title></title>
<style type="text/css">
td:hover{
color: red;
}
.class1{
}
.class2{
background-color: red;
}
</style>
</head>
<body>
<table>
<tr>
<th>test</th>
<td class="class1" idnum="111">TD1</td>
<td class="class1" idnum="444">TD2</td>
<td class="class1" idnum="333">TD3</td>
</tr>
</table>
<h1 id="content"></h1>
<script type="text/javascript">
$(document).ready(function(){
var array1 = ["111","444","333"];
$("td").each(function(){
var td = ($(this).attr("idnum"));
for(var i = 0; i < array1.length; i++){
if(td == array1[i])
$(this).addClass("class2");
}
})
})
$(document).ready(function(){
$(".class1").on("click", function(){
$(this).toggleClass("class2");
var idnum = $(this).attr("idnum");
alert("idnum is " + idnum);
})
})
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.