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

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

重新排列 HTML 表格

重新排列 HTML 表格

慕尼黑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)

})

<button id="alter">

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
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號