Question

是否可以替换表格单元而不用javascript或jQuery删除它？例如，如果我有一个包含多行的表，每行有5个单元格，是否可以通过赋值更改第一行的第一个单元格而不是删除单元格然后插入新单元格？

编辑（简化）：

<table>
    <tr id="currentRowId1" name="currentRowId1">
        <td style="text-align:center">
        </td>
        <td style="text-align:center">
        </td>
        <td style="text-align:center">
            <input type="submit" onclick="changeOrder()" />
        </td>
        <td style="text-align:center">
        </td>
        <td>
        </td>
    </tr>
    <tr id="currentRowId2" name="currentRowId2">
        <td style="text-align:center">
        </td>
        <td style="text-align:center">
        </td>
        <td style="text-align:center">
            <input type="submit" onclick="changeOrder()" />
        </td>
        <td style="text-align:center">
        </td>
        <td>
        </td>
    </tr>
</table>

JS

function changeOrder(){
var row = document.getElementById("currentRowId1");
var otherRow = document.getElementById("currentRowId2");
row.cells[0] = otherRow.cells[0];
}

Answer 1

实际上没有必要在这里使用innerHTML。您可以像这样替换两个元素：

var
  a = document.getElementById('currentRowId1').cells[0],
  e = document.getElementById('currentRowId2').cells[0],
  e1 = e.nextSibling;

a.parentNode.replaceChild(e, a);
e1.parentNode.insertBefore(a, e1);

演示：http://jsfiddle.net/X4zzb/1/

Answer 2

有多种方法可以做到这一点。您可以像fabianhjr指出的那样设置单元格的内部html。您还可以在javascript / jquery中构建新元素并使用jquery's replaceWith()方法。

您可以使用替换单元格的其他jquery方法，clone()和before()或after()我知道这不是您要求的指出其他选择。

示例＃1：

var me = $("#cellId");
var newHtml = $("<div>blah blah blah</div>");
me.replaceWith(newHtml);

示例＃2：

var me = $("#cellId");
var clone = me.clone();
 // do some cool things with the clone change html whatever
me.replaceWith(clone);

Answer 3

如果您只想更改其中的内容，可以使用..

document.getElementById('nameofyourcell').innerHTML = 'content';

Answer 4

你不能只是将细胞分配给你在这一行中尝试过的其他东西：

row.cells[0] = otherRow.cells[0];  // doesn't work

但是，一旦您有对单元格的引用，您可以更改其中的内容，例如，将内容从一个单元格复制到另一个单元格：

row.cells[0].innerHTML = otherRow.cells[0].innerHTML;

您还可以通过对单元格的引用来创建，修改或删除单元格的子项。

如果你正在使用jQuery，有许多方法可以达到同样的效果，例如，以下内容相当于上述内容（但效率较低）：

$(row.cells[0]).html( $(otherRow.cells[0].html() );

是否可以替换表格单元而不用javascript或jQuery删除它？

4 个答案: