是否有可能替换一个表格单元格而不删除它与javascript或jQuery

Is it possible to replace a table cell without deleting it with javascript or jQuery?

本文关键字：删除 jQuery javascript 单元格 表格 替换 有可能 一个 是否      更新时间：2023-09-26

是否可以替换一个表格单元格而不删除它与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];
}

这里实际上不需要使用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/

有多种方法可以做到这一点。您可以像fabianhjr指出的那样设置单元格的内部html。你也可以在javascript/jquery中构建一个新元素，并使用jquery的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);

如果你只是想改变里面的内容，你可以使用…

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

不能像下面这行那样把单元格的equal赋值给别的东西:

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() );
相关文章：