在按钮上单击表格内的单元格中的值

Question

我正在尝试在3到3的表格中移动单元格值。但是我只需点击一下按钮就可以一次移动一个单元格。这可能与jQuery或JS有关吗？我有下表：

[1][2][3]
[4][5][6]
[7][8][9]

我想点击一个按钮向右移动：

[4][1][2]
[7][5][3]
[8][9][6]

依旧......

这是我的HTML：

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr><tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr><tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

<button id="moveStuff">Move!</button>

Answer 1

这太苛刻了，我不一定会建议它，但它应该给你一个开始的地方。基本上你可以做的是创建一个函数来抓取所有td并根据它们的索引值重新排列它们。每次调用该函数时，它都会重新创建cells变量，这意味着它将始终以与正确单元格关联的正确索引值开始。

来源： http://jsfiddle.net/9nfvc/
演示： http://jsfiddle.net/9nfvc/show

HTML

<table id="rotation">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr><tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr><tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

<button id="moveStuff">Move!</button>

的JavaScript

document.getElementById('moveStuff').onclick = (function(){
    var cells = document.getElementById('rotation').getElementsByTagName('td');
    var rows = document.getElementById('rotation').getElementsByTagName('tr');

    rows[2].appendChild(cells[5].parentNode.removeChild(cells[5]));
    rows[1].appendChild(cells[2].parentNode.removeChild(cells[2]));

    rows[1].insertBefore(cells[5].parentNode.removeChild(cells[5]), cells[3]);
    rows[0].insertBefore(cells[2].parentNode.removeChild(cells[2]), cells[0]);
});

---

修改

我更喜欢这种方式。

来源： http://jsfiddle.net/ZquQL/
演示： http://jsfiddle.net/ZquQL/show

的JavaScript

document.getElementById('moveStuff').onclick = (function(){
    var parent = document.getElementById('rotation');
    var cells = [];
    var rows = parent.getElementsByTagName('tr');
    var patern = [3,0,1,6,4,2,7,8,5];

    for (var i = 0; i < rows.length; i++) {
        while(rows[i].firstChild) {
            var node = rows[i].removeChild(rows[i].firstChild)
            if(node.nodeType === document.ELEMENT_NODE) cells.push(node);
        }
    }

    row = -1;
    for(i in cells) {
        if(i%3 === 0) row++;
        rows[row].appendChild(cells[patern[i]]);
    }
});