使用JQuery替换整个表格行（包括<tr></tr>）

Question

我看了这里的其他例子，但它们似乎只是替换了 <tr> 的内容，而没有替换包括 <tr> 在内的整个行。

<table>
    <tr style="display:block">
        <td id="someid">Test</td>
        <td>Some text</td>
    </tr>
</table>

以下代码似乎只替换了<tr>的innerHTML。我需要替换所有内容，包括<tr>，以便行折叠。有人能确认这段代码是否完全替换了整行吗？

var newtr = "<tr style='display:none'><td id='someid'></td><td></td></tr>"
$("td#someid").parent().html(newtr);

我认为整个<tr>并没有被替换的原因是该行未折叠 - 尽管我在JQuery之外测试了HTML并且它可以正常工作。

- rwkiii

Answer 1

你已经接近成功了，只需使用jQuery的replaceWith^{[jQuery文档]}函数即可：

$("td#someid").parent().replaceWith(newtr);

- Peter Olson

---

哇，看起来这就是答案。我改了代码，现在它运行得更好了。以前我能够更改大约32次的行，所有的行都会消失。我知道有些地方出了问题。这个修复了那个问题。但我的行还没有折叠。也许这部分是一个CSS问题，但这已经在与此脚本相同的HTML页面中进行了测试。在JQuery方面还需要做什么吗？顺便说一下，感谢您提供的所有答案！ - rwkiii

如果您需要折叠行的帮助，您应该就此提出一个新问题。这只是替换表格行。 - Peter Olson

Answer 2

适当的函数是 .replaceWith ：

$("td#someid").parent().replaceWith(newtr);

- Jon

Answer 3

使用JQuery的replaceWith方法来替换元素。

$('#someid').parent().replaceWith(newtr);

- Adil

Answer 4

如果你想替换对象本身，而不是它的内容：

$("td#someid").parent().replaceWith(newtr);

- John Green

Answer 5

你也可以检查这个JsFiddle。

var newtr = "<tr style='display:none'><td id='someid'></td><td></td></tr>";

$("td#someid").parent().parent().html(newtr);

- Umair Noor

---

如果存在更多的行，这将覆盖现有的HTML。 - Adil

Answer 6

如果您更喜欢使用HTML技术而不是切换元素，请尝试以下方法：

您说得对，这不会替换tr元素。 .html("...")替换元素的内部HTML（在本例中为tr）。 使用JavaScript outerHTML来实现此目的：$("td#someid").parent().get(0).outerHTML = newtr;

- jaypeagi

---

FF 11.0+、Chrome 0.2+、IE 4.0+、Opera 7+、Safari 1.3+ 支持 outer HTML（https://developer.mozilla.org/en/DOM/element.outerHTML）。JQuery 1.2+ 支持 replaceWith 方法。 - jaypeagi

Answer 7

查看此演示：http://jsfiddle.net/rathoreahsan/QXmTN/

Jquery

$("td#someid").parent().replaceWith(newtr);

- Ahsan Rathod