jquery克隆（）和替换文字

Question

我有一个大的表我需要在同一页面创建多次，但我不知道必须做的。我认为最简单的方法是将表格作为隐藏在页面上的局部视图，每当我需要它时，我都会从我的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> 

Answer 1

您需要首先解决重复的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 

的jsfiddle：http://jsfiddle.net/TrueBlueAussie/381ugdvr/1/

Answer 2

如果我可以让你在找什么，看看这个解决方案：

的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：

<div class="pasteTable" data-repair-id="#1" data-mwt="baby" data-mdt="ball"></div> 

演示： http://jsfiddle.net/zf09m0at/3/