如何在js中一一移动每一行的背景颜色并从前一个颜色中删除颜色
Posted
技术标签:
【中文标题】如何在js中一一移动每一行的背景颜色并从前一个颜色中删除颜色【英文标题】：How to shift background color of each row one by one and remove color form previous one in 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>【问题讨论】：
color 中的key 是什么？你都尝试了些什么？ How much research effort is expected of Stack Overflow users?“在 Stack Overflow 上提问应该是你寻找答案的最后一步”
【参考方案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>【讨论】：
以上是关于如何在js中一一移动每一行的背景颜色并从前一个颜色中删除颜色的主要内容，如果未能解决你的问题，请参考以下文章