jquery克隆（）和替換文字

我有一個大的表我需要在同一頁面創建多次，但我不知道必須做的。我認爲最簡單的方法是將表格作爲隱藏在頁面上的局部視圖，每當我需要它時，我都會從我的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>

來源

2014-10-01 mortenstarck

哪些數據需要在表格中更改？我猜猜粗體標籤？ – Botonomous 2014-10-01 15:38:56

你在HTML中有'ID'來克隆，這是一個很大的「禁忌」。您無法在頁面中重複使用ID。這是無效的HTML。 – 2014-10-01 15:42:19

您需要首先解決重複的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/

來源

2014-10-01 15:52:09

如果我可以讓你在找什麼，看看這個解決方案：

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

來源

2014-10-01 15:42:52 LGVentura

這會生成具有重複ID的元素（例如'span's）。 – 2014-10-01 15:43:23

@TrueBlueAussie更新 – LGVentura 2014-10-01 15:44:18

jquery克隆（）和替換文字

回答

相關問題