gpt4 book ai didi

javascript - 使用 .each() 定位当前元素

转载 作者:行者123 更新时间:2023-12-03 01:44:49 24 4
gpt4 key购买 nike

因此,我尝试通过循环来仅对表格的几行进行着色。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style>
.blue{
background-color : blue;
}
</style>
</head>
<table id="myTable"></table>
<body>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>


<script>

arr1 = [
"Name1", "Name2", "Name3"
];

arr2 = ["8", "4", "2"]

arr3 = ["4", "5", "1"]



for (var j = 0; j < 3; j++) {

var table = document.getElementById("myTable");
var row = table.insertRow(j);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);

cell1.innerHTML = arr1[j]
cell2.innerHTML = arr2[j]
cell3.innerHTML = arr3[j]
}

var cell2cont = $('#myTable').find('td:nth-child(2)')[0];
var cell3cont = $('#myTable').find('td:nth-child(3)')[0];
cell2value = Number(cell2cont.innerHTML);
cell3value = Number(cell3cont.innerHTML);

trs = $('#myTable').find('tr')

trs.each(function(){

if(cell2value>cell3value){
trs.addClass('blue')
}
})

</script>

</body>
</html>

fiddle :https://jsfiddle.net/mo1Luszw/

在结果中,中间行也被着色,但由于该行中的 cell2value 不 > cell3value,我希望它保持白色。

我还尝试过循环每一行:

 for(i=0; i<trs.length; i++){
if(cell2value>cell3value){
trs.eq(i).addClass('blue')
}
}

相同的结果。有什么帮助吗?谢谢。

最佳答案

您只需要检索 .each() 函数内单元格的值即可。

 
arr1 = [
"Name1", "Name2", "Name3"
];

arr2 = ["8", "4", "2"]

arr3 = ["4", "5", "1"]



for (var j = 0; j < 3; j++) {

var table = document.getElementById("myTable");
var row = table.insertRow(j);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);

cell1.innerHTML = arr1[j]
cell2.innerHTML = arr2[j]
cell3.innerHTML = arr3[j]
}



trs = $('#myTable').find('tr')

trs.each(function(){

var cell2cont = $(this).find('td:nth-child(2)')[0];
var cell3cont = $(this).find('td:nth-child(3)')[0];
cell2value = Number(cell2cont.innerHTML);
cell3value = Number(cell3cont.innerHTML);

if(cell2value>cell3value){
$(this).addClass('blue')
}
})
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style>
.blue{
background-color : blue;
}
</style>
</head>
<table id="myTable"></table>
<body>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>

关于javascript - 使用 .each() 定位当前元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50685987/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com