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/