Javascript Jquery克隆（）并替换文本

我有一个大表，我需要在同一页中创建多次，但我不确定是否必须这样做。我认为最简单的方法是将表作为部分视图隐藏在页面上，每次需要时，我都会从jQuery代码中克隆它。我知道必须克隆它，但我不确定在插入之前是否必须将文本插入特定的跨度

这是我桌子的一个小例子。有人能帮我解决这个问题吗

 < div id="ToClone">
            <table >
                <tr>
                    <td>
                        <table>
                            <tr><td><b>MMS_RepairLabel:</b></td><td align="right"><span id="RepairId"></span></td></tr>
                            <tr><td><b>MMS_MWTLabel:</b></td><td align="right"><span id="MWT"></span></td></tr>
                            <tr><td><b>MMS_MDTLabel:</b></td><td align="right"><span id="MDT"></span></td></tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
        <script>
            var History = (function () {
                $(function () {
                    var tblClone = $("#ToClone").clone();
                });
            }());
        </script>

---

如果我能得到您想要的，请查看以下解决方案：

jQuery：

$('.pasteTable').each(function(){

    var RepairId = $(this).data('repair-id');
    var MWT = $(this).data('mwt');
    var MDT = $(this).data('mdt');

    $(this).html('<table><tr><td><b>MMS_RepairLabel:</b></td><td align="right"><span class="RepairId">' + RepairId + '</span></td></tr><tr><td><b>MMS_MWTLabel:</b></td><td align="right"><span class="MWT">' + MWT + '</span></td></tr><tr><td><b>MMS_MDTLabel:</b></td><td align="right"><span class="MDT">' + MDT + '</span></td></tr></table>');
});

在代码中希望克隆表的任何位置，只需插入具有“data”属性的：

HTML:

演示：

---

您需要首先解决重复ID的问题。我建议把他们改成班级

我建议为模板使用一个虚拟脚本块。这对于维护非常有用，浏览器只需忽略未知类型，即可插入任何元素：

<script id="ToClone" type="text/template">
    <table>
        <tr>
            <td>
                <table>
                    <tr>
                        <td><b>MMS_RepairLabel:</b>
                        </td>
                        <td align="right"><span class="RepairId"></span>
                        </td>
                    </tr>
                    <tr>
                        <td><b>MMS_MWTLabel:</b>
                        </td>
                        <td align="right"><span class="MWT"></span>
                        </td>
                    </tr>
                    <tr>
                        <td><b>MMS_MDTLabel:</b>
                        </td>
                        <td align="right"><span class="MDT"></span>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</script>

---

jsIDLE:

表中需要更改哪些数据？我猜是粗体标签吗？你在HTML中有要克隆的ID，这是一个很大的禁忌。你不能在页面中有重复的ID。这是无效的HTML。这会生成具有重复ID的元素，例如在跨距上。

<script id="ToClone" type="text/template">
    <table>
        <tr>
            <td>
                <table>
                    <tr>
                        <td><b>MMS_RepairLabel:</b>
                        </td>
                        <td align="right"><span class="RepairId"></span>
                        </td>
                    </tr>
                    <tr>
                        <td><b>MMS_MWTLabel:</b>
                        </td>
                        <td align="right"><span class="MWT"></span>
                        </td>
                    </tr>
                    <tr>
                        <td><b>MMS_MDTLabel:</b>
                        </td>
                        <td align="right"><span class="MDT"></span>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</script>

    var $clone = $($('#ToClone').html());
    $('.RepairId', $clone).text(repairIdValue);
    $('.MDT', $clone).text(mdtValue);
    $('.MWT', $clone).text(mwtValue);
    // Do something with the clone