首頁猿問重新排列 HTML 表格

重新排列 HTML 表格

Html5

慕尼黑8549860 2024-01-03 17:29:16

我有一個JSON這樣的數據：var data = [ {"city":"seattle", "state":"WA", "population":652405, "land_area":83.9}, {"city":"new york", "state":"NY", "population":8405837, "land_area":302.6}, {"city":"boston", "state":"MA", "population":645966, "land_area":48.3}, {"city":"kansas city", "state":"MO", "population":467007, "land_area":315} ]我已將此JSON數據添加到我的HTML表中。5 seconds現在，每次單擊按鈕時如何隨機排列這些數據？alter.addEventListener('click', function() { //code goes here})

查看完整描述

2 回答

斯蒂芬大帝

TA貢獻1827條經驗獲得超8個贊

這是一種方法，如何在單擊按鈕后每 5 秒對數組進行一次洗牌，如果多次單擊它，它將始終取消先前的超時實例

var data = [{

"city": "seattle",

"state": "WA",

"population": 652405,

"land_area": 83.9

{

"city": "new york",

"state": "NY",

"population": 8405837,

"land_area": 302.6

{

"city": "boston",

"state": "MA",

"population": 645966,

"land_area": 48.3

{

"city": "kansas city",

"state": "MO",

"population": 467007,

"land_area": 315

}

]

const arrRandomIndex = []

const newArr = [];

while (arrRandomIndex.length !== data.length) {

const randomNum = Math.floor(Math.random() * data.length);

if (!arrRandomIndex.includes(randomNum)) {

arrRandomIndex.push(randomNum);

}

for (let i = 0; i < data.length; i++) {

newArr[i] = data[arrRandomIndex[i]];

}

let timeId;

document.getElementById('alter').addEventListener('click', function() {

clearTimeout(timeId);

timeId = setTimeout(_ => console.log('Random array', newArr), 5000)

})

AlTER

</button>

反對回復 2024-01-03

犯罪嫌疑人X

TA貢獻2080條經驗獲得超4個贊

給定的rows是一個節點列表tr

function randomise() {

for (const row of rows) {

const table = row.parentElement;

table.insertBefore(

row,

table.children[Math.floor(Math.random() * table.children.length)]

);

}

alter.addEventListener("click", () => {

randomise();

setInterval(function () {

randomise();

}, 5000);

});

反對回復 2024-01-03

2 回答
0 關注
189 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

重新排列 HTML 表格

重新排列 HTML 表格

2 回答

添加回答