【问题标题】：How to shift background color of each row one by one and remove color form previous one in js如何在js中一一移动每一行的背景颜色并从前一个颜色中删除颜色
【发布时间】：2021-05-20 02:41:28
【问题描述】：
这里是表格，我想要第一行的背景颜色为蓝色，10 秒后我想要第二行的颜色为蓝色并从第一行中删除颜色。同样，第三行颜色在 10 秒后变为蓝色并从第二行中移除。就像我在表格中添加行一样，动画将动态应用于所有。此表数据来自 API，因此行会自动添加到表中，因此我希望动画动态应用于所有行...提前致谢 table
var __data = [];
$(document).ready(function () {
$.getJSON('myfile.json', function (data) {
var getData = '';
$.each(data, function (key, value) {
// var obj=[key,value];
// console.log(obj);
__data.push(value);
getData += '<tr class="my-row" onclick="viewValues(' + key + ')">' + '<td class="para-name" >' + value.name + '</td>' +
'<td class="para-value">' + value.value + '</td>' +
'<td class="para-unit">' + value.unit + '</td>'
+
'</tr>';
});
$("#scroll").append(getData);
})
});
function viewValues(ob) {
console.log(__data[ob].value);
setInterval(function () {
document.getElementById('parameter').innerHTML = __data[ob].name;
document.getElementById('value').innerHTML = __data[ob].value;
document.getElementById('unit').innerHTML = __data[ob].unit;
}, 2000)
}
function color() {
viewValues(key)
}
body {
text-align: center;
}
.card {
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
width: 200px;
padding: 10px;
margin: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body onload="color()">
<div class="card">
<span id="value">25 </span><span id="unit">ppm</span>
<p id="parameter">Sodium Oxide</p>
</div>
<div class="table-responsive">
<table class="table" border="1">
<thead>
<tr>
<th scope="col">Parameter</th>
<th scope="col">Value</th>
<th scope="col">Unit</th>
</tr>
</thead>
<tbody id="scroll">
</tbody>
</table>
</div>
</body>
</html>
【问题讨论】：
标签：
javascript
jquery
css
json
animation
【解决方案1】：
我设置了3秒，你可以改成10秒
myTimer = setTimeout(changeBackground, 3000)
var myTimer;
var rowCount = $('.table tbody tr').length;
current=0;
changeBackground();
function changeBackground()
{
$('.table tbody tr').each(function (idx) {
$(this).removeClass('tr');
if(current == idx)
$(this).addClass('tr')
});
current=current+1;
if(current > rowCount - 1)
current = 0;
myTimer = setTimeout(changeBackground, 3000)
}
body {
text-align: center;
}
.card {
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
width: 200px;
padding: 10px;
margin: 10px;
}
.tr
{
background : blue;
color:white;
transition:background .3s;
}
.table
{
border-collapse:collapse;
border:1px solid #ddd;
}
.table td
{
padding: 10px 15px;
}
<div class="card">
<span id="value">25 </span><span id="unit">ppm</span>
<p id="parameter">Sodium Oxide</p>
</div>
<div class="table-responsive">
<table class="table" border="1">
<thead>
<tr>
<th scope="col">Parameter</th>
<th scope="col">Value</th>
<th scope="col">Unit</th>
</tr>
</thead>
<tbody id="scroll">
<tr>
<td scope="col">Parameter 1</td>
<td scope="col">Value 1</td>
<td scope="col">Unit 1</td>
</tr>
<tr>
<td scope="col">Parameter 2</td>
<td scope="col">Value 2</td>
<td scope="col">Unit 2</td>
</tr>
<tr>
<td scope="col">Parameter 3</td>
<td scope="col">Value 3</td>
<td scope="col">Unit 3</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
【解决方案2】：
这可以主要通过 CSS 来完成 - 使用 JS 只是为了设置动画，之后就不需要调用 JS。
var __data = [];
$(document).ready(function () {
/*
$.getJSON('myfile.json', function (data) {
var getData = '';
$.each(data, function (key, value) {
// var obj=[key,value];
// console.log(obj);
__data.push(value);
getData += '<tr class="my-row" onclick="viewValues(' + key + ')">' + '<td class="para-name" >' + value.name + '</td>' +
'<td class="para-value">' + value.value + '</td>' +
'<td class="para-unit">' + value.unit + '</td>'
+
'</tr>';
});
$("#scroll").append(getData);
})
});
function viewValues(ob) {
console.log(__data[ob].value);
setInterval(function () {
document.getElementById('parameter').innerHTML = __data[ob].name;
document.getElementById('value').innerHTML = __data[ob].value;
document.getElementById('unit').innerHTML = __data[ob].unit;
}, 2000)
}
function color() {
viewValues(key)
}
*/
// once you have the table loaded go through calculating the parameters for running the animations
const rows = document.querySelectorAll('table.table tbody tr');
for (let i = 0; i < rows.length; i++) {
//calculate the delay for each row.i);
rows[i].style.animationDuration = 3*rows.length + 's';
rows[i].style.animationDelay = 3*i + 's';
rows[i].style.animationName = 'highlight';
}
document.getElementById('animation').innerHTML = `
@keyframes highlight {
0% {
background-color: cyan;
}
` + 100/rows.length + '%' + ` {
background-color: cyan;
}` + (100/rows.length + 0.1) + '%' + ` {
background-color: transparent;
}
100% {
background-color: transparent;
}
}`;
});
<style>
body {
text-align: center;
}
.card {
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
width: 200px;
padding: 10px;
margin: 10px;
}
tbody tr {
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
</style>
<style id="animation">
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><div class="card">
<span id="value">25 </span><span id="unit">ppm</span>
<p id="parameter">Sodium Oxide</p>
</div>
<div class="table-responsive">
<table class="table" border="1">
<thead>
<tr>
<th scope="col">Parameter</th>
<th scope="col">Value</th>
<th scope="col">Unit</th>
</tr>
</thead>
<tbody id="scroll">
<tr><td>row 1</td><td>1</td><td>2</td></tr>
<tr><td>row 2</td><td>1</td><td>2</td></tr>
<tr><td>row 3</td><td>1</td><td>2</td></tr>
</tbody>
</table>
</div>