jQuery 替换未按预期运行

Question

$(".rowIWanTtoReplace").replaceWith("<tr><td rowspan='11' class='n'>n</td><td rowspan='8'>n</td><td>t</td><td>n</td></tr><tr><td>u</td><td>n</td></tr><tr><td>v</td><td>n</td></tr><tr><td>w</td><td>n</td></tr><tr><td>x</td><td>n</td></tr><tr><td>y</td><td>n</td></tr><tr><td>z</td><td>n</td></tr>");

td {
  border: 1px solid black
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table class="station-device-table4">
        <tr>
            <td>x</td>
            <td>y</td>
            <td>z</td>
        </tr>
        <tr class="rowIWanTtoReplace">
            <td rowspan="11" class="s">foobar</td>
            <td rowspan="7">foobar</td>
            <td>n</td>
        </tr>
    </table>

我只是想检查在这种情况下这是否应该是 replaceWith() 的结果：

如果我有一个 table 并且在一行上我应用了 replaceWith()，而我用它替换的是多个 table 行。

这不应该只影响 HTML 所以当显示多个时应该显示在那个部分？

即 ------ TR 1 ----------

.replaceWith("<tr>x</tr><tr>y</tr>")

第一行不应该替换另一行。第二行追加在?

之后

或者有其他方法吗？

谢谢。

情况示例代码：

<table class="station-device-table4">
        <tr>
            <td>x</td>
            <td>y</td>
            <td>z</td>
        </tr>
        <tr class="rowIWanTtoReplace">
            <td rowspan="11" class="s">foobar</td>
            <td rowspan="7">foobar</td>
            <td>n</td>
        </tr>
    </table>

JQuery 示例：

$(".rowIWanTtoReplace").replaceWith("<tr>
        <td rowspan="11" class="n">n</td>
        <td rowspan="8">n</td>
        <td>t</td>
        <td>n</td>
    </tr>
    <tr><td>u</td><td>n</td></tr>
    <tr><td>v</td><td>n</td></tr>
    <tr><td>w</td><td>n</td></tr>
    <tr><td>x</td><td>n</td></tr>
    <tr><td>y</td><td>n</td></tr>
    <tr><td>z</td><td>n</td></tr>")

注意：这是由 backbone collections 和东西制成的。我已经将它用来更新的 html 输出到屏幕上。并且把代码放在一起就好像正常一样jquery.

Answer 1

除非您使用 template literals，否则您不能在字符串中使用换行符 - 此外，您还嵌套了双引号，这也不起作用。在原始代码中，您将 header 单元格替换为 table 行，该行也未计算。

这可能是您想要的：

$(".rowIWanTtoReplace").replaceWith(`<tr>
        <td rowspan="11" class="tvmStatus">TVM Status</td>
        <td rowspan="8">Component Events</td>
        <td>t</td>
        <td>n</td>
    </tr>
    <tr><td>u</td><td>n</td></tr>
    <tr><td>v</td><td>n</td></tr>
    <tr><td>w</td><td>n</td></tr>
    <tr><td>x</td><td>n</td></tr>
    <tr><td>y</td><td>n</td></tr>
    <tr><td>z</td><td>n</td></tr>`)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="station-device-table4">
        <tr>
            <td>x</td>
            <td>y</td>
            <td>z</td>
        </tr>
        <tr class="rowIWanTtoReplace">
            <td rowspan="11" class="s">foobar</td>
            <td rowspan="7">foobar</td>
            <td>n</td>
        </tr>
    </table>

jQuery 替换未按预期运行

jQuery Replace not acting as expected

javascript

jquery

backbone.js