Javascript 如何使用DOM保持html表维度不变

我有一个4列2行的图像表。我使用以下代码洗牌表格：

function sortTable() {
  //get the parent table for convenience
  let table = document.getElementById("imgTable");

  //1. get all rows
  let rowsCollection = table.querySelectorAll("td");

  //2. convert to array
  let rows = Array.from(rowsCollection)
    

  //3. shuffle
  shuffleArray(rows);

  //4. add back to the DOM
  for (const row of rows) {
    table.appendChild(row);
  }
}


function shuffleArray(array) {
  for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
}

但是在洗牌之后，所有的东西都进入了1排和8列。如何保持尺寸不变

---

我想你选错了选择器，应该是

tr

函数排序表（）{
//为方便起见，获取父表
let table=document.getElementById（“imgTable”）；
//1.获取所有行
让rowsCollection=table.querySelectorAll（“tr”）；
//2.转换为数组
让rows=Array.from（rowsCollection）
//3.洗牌
沙弗雷（行）；
//4.添加回DOM
for（常量行中的行）{
表2.追加子项（行）；
}
}
函数shuffleArray（数组）{
对于（var i=array.length-1；i>0；i--）{
var j=Math.floor（Math.random（）*（i+1））；
var-temp=数组[i]；
数组[i]=数组[j]；
数组[j]=温度；
}
}
const shuffle=document.getElementById（'shuffle'）；
shuffle.addEventListener（'click'，（）=>{
排序表（）
});
shuffle
1.
1.
1.
1.
2.
2.
2.
2.
3.
3.
3.
3.
如评论中所述，您将把无序单元格直接附加到table元素。这不是
td
元素允许的父元素。相反，将洗牌后的单元格分配回原始行


函数排序表（）{
//为方便起见，获取父表
let table=document.getElementById（“imgTable”）；
//1.获取所有行
让cellCollection=table.querySelectorAll（“td”）；
//2.转换为数组
let cells=Array.from（cellCollection）
//3.洗牌
沙夫雷（细胞）；
//4.添加回DOM
const rows=table.rows，
len=行数。长度；
设指数=0；
for（单元格的常量单元格）{
常量行=行[索引+++%len]；
子行（单元格）；
}
}
函数shuffleArray（数组）{
对于（var i=array.length-1；i>0；i--）{
var j=Math.floor（Math.random（）*（i+1））；
var-temp=数组[i]；
数组[i]=数组[j]；
数组[j]=温度；
}
}
可排序（）

R1C1
R1C2
R1C3
R1C4
R2C1
R2C2
R2C3
R2C4
您正在洗牌
td
元素，然后将它们直接添加到
table
元素上，您必须将
td
s分配给
tr
元素。
tr
将洗牌这两行，并且这两行都是相同的，因此它实际上不会随机化任何东西。这就是为什么我使用
td
来洗牌所有的表数据值@Teemu
tr
将洗牌这两行，并且这两行都是相同的，所以它实际上不会随机化任何东西。这就是为什么我使用
td
来洗牌所有表数据值，正如您在代码片段中看到的那样，洗牌后，行仍然是相同的2或1 1。我试着得到一些像2312，1233，2113等等的东西