javascript - 如何从JavaScript中表格的最右端/列开始插入表格单元格

我正在一张桌子上，像蛇一样在桌子上添加单元格。

可以想象，对于第1行：我想拥有一个将表单元格从最左边的列添加到最右边的列的函数

然后，对于第2行：我想拥有一个将表单元格从最右边的列添加到最左边的列的函数。

使用w3schools的这段代码可以完成从左到右的移动...

function myFunction() {
  var row = document.getElementById("myRow");
  var x = row.insertCell(-1);
  x.innerHTML = "New cell";
}

adding cells from left to right

但是，我需要从右到左的帮助。我知道这一点：

row.insertCell(0)

但这会将单元格添加到起始单元格的左侧，然后将其推到右侧。我想从最右边的列开始，然后将单元格1加1（在最后添加的左边），直到到达表的最左侧。想一想一个幻想足球选秀板，然后像蛇一样穿在桌子上。从左到右在第一行，从右到左在第二行，从左到右在第三行，从右到左在第四行，等等...有什么想法吗？

最佳答案

CSS解决方案可能是您最好的选择，脚本解决方案有点笨拙。

您可以用间隔单元格填充该行，该单元格的单元格跨度为该行中单元格的数量。然后，每次在其后附加一个单元格时，将其单元格跨度减小1。最后，移开垫片。

以下是示例实现，从右到左添加单元格。您应该能够使算法适应您的需求，我希望注释足够。可能有更好的方法。

填满该行后，将其删除，准备再次开始…

我使用了data- *属性来标识间隔符，但是您可以使用类甚至ID。

function doCellThing() {
  var table = document.querySelector('table');
  var numCells = table.rows[0].cells.length;
  var spacer, cell, i;

  // Grab second row if there is one, or create a new one
  var row = table.rows[1] || table.insertRow();

  // Get the first cell in the row
  cell = row.cells[0];

  // If it's not a spacer cell, remove the row
  if (cell && !cell.hasAttribute('data-span')) {
    table.deleteRow(row.rowIndex);
    return;

  // Otherwise, it's a spacer
  } else {
    spacer = cell
  }

  // If there are no cells, insert a spacer cell
  if (!spacer) {
    spacer = row.insertCell();
    spacer.colSpan = numCells;
    spacer.setAttribute('data-span','span');
  }

  // If spacer width is 1, remove it. Otherwise,
  // reduce span by 1
  if (spacer.colSpan == 1) {
    row.deleteCell(0);
    spacer = null;

  } else {
    spacer.colSpan = spacer.colSpan - 1;
  }

  // Insert a new cell to the left of previous cells
  cell = row.insertCell(spacer? 1 : 0)
  cell.innerHTML = numCells - row.cells.length + (spacer? 1 : 0);

}

<button onclick="doCellThing()">Do cell thing</button>

<table>
  <tr>
    <th>0<th>1<th>2<th>3
  </tr>
</table>

关于javascript - 如何从JavaScript中表格的最右端/列开始插入表格单元格，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31910577/