2015-03-03 29 views
0

這裏是我的jsrender HTML使用jquery在不同的表中顯示對象的元素?

<script id="pageDetails1" type="text/x-jsrender"> 
    <tr> 
     <td class="hidden-xs">{{>pageName}}</td> 
     <td class="hidden-xs">{{>pageCount}}</td> 
    </tr> 
</script> 
<script id="pageDetails2" type="text/x-jsrender"> 
    <tr> 
     <td class="hidden-xs">{{>pageName}}</td> 
     <td class="hidden-xs">{{>pageCount}}</td> 
    </tr> 
</script> 
<script id="pageDetails3" type="text/x-jsrender"> 
    <tr> 
     <td class="hidden-xs">{{>pageName}}</td> 
     <td class="hidden-xs">{{>pageCount}}</td> 
    </tr> 
</script> 

下面是HTML表格IDS,到即時通訊使用jQuery代碼IM推名爲 「tdaPages」 到數組插入模板

<tbody id="pageDetails-1"></tbody> 
<tbody id="pageDetails-2"></tbody> 
<tbody id="pageDetails-3"></tbody> 

這裏這些ID。

$("#pageDetails-1").html($("#pageDetails1").render(tdaPages)); 
$("#pageDetails-2").html($("#pageDetails2").render(tdaPages)); 
$("#pageDetails-3").html($("#pageDetails3").render(tdaPages)); 

我想要什麼: ,就是以pageDetails1 ID,然後在pageDetails2未來10前10個元素,然後在pageDetails3接下來的10個元素。

我得到的是: 它顯示了所有的相同值。那就是pageDetails1,pageDetails2,pageDetails3顯示了相同的元素。

有人可以建議如何解決這個問題嗎?

+0

_an數組名爲「tdaPages」_ yes對於所有數組都是相同的。 – Jai 2015-03-03 10:26:38

+0

使用#index檢查計數器的不同pageDetails部分 – 2015-03-03 10:40:21

回答

0
<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
    <script src="jsrender.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     var tdaPages = [ 
      { pageName: "One", pageCount: "1"}, 
      { pageName: "Two", pageCount: "2"}, 
      { pageName: "Three", pageCount: "3"}, 
      { pageName: "Four", pageCount: "4"}, 
      { pageName: "Five", pageCount: "5"}, 
      { pageName: "Six", pageCount: "6"}, 
      { pageName: "Seven", pageCount: "7"}, 
      { pageName: "Eight", pageCount: "8"}, 
      { pageName: "Nine", pageCount: "9"} 
     ]; 
    </script> 
</head> 
<body> 
    <table id="pageDetails-1"></table> 
    <table id="pageDetails-2"></table> 
    <table id="pageDetails-3"></table> 

    <script id="pageDetails1" type="text/x-jsrender"> 
    {{if #index < 3}} 
     <tr> 
      <td class="hidden-xs">{{>pageName}}</td> 
      <td class="hidden-xs">{{>pageCount}}</td> 
     </tr> 
    {{/if}} 
    </script> 
    <script id="pageDetails2" type="text/x-jsrender"> 
    {{if #index > 2 && #index < 6 }} 
     <tr> 
      <td class="hidden-xs">{{>pageName}}</td> 
      <td class="hidden-xs">{{>pageCount}}</td> 
     </tr> 
    {{/if}} 
    </script> 
    <script id="pageDetails3" type="text/x-jsrender"> 
    {{if #index > 5 && #index < 9 }} 
     <tr> 
      <td class="hidden-xs">{{>pageName}}</td> 
      <td class="hidden-xs">{{>pageCount}}</td> 
     </tr> 
    {{/if}} 
    </script> 

    <script type="text/javascript"> 
     $("#pageDetails-1").html($("#pageDetails1").render(tdaPages)); 
     $("#pageDetails-2").html($("#pageDetails2").render(tdaPages)); 
     $("#pageDetails-3").html($("#pageDetails3").render(tdaPages)); 
    </script> 
</body> 
</html> 
相關問題