Javascript 使用jquery在不同的表中显示对象的元素？_Javascript_Jquery_Html_Jsrender

Javascript 使用jquery在不同的表中显示对象的元素？

javascript jquery html

Javascript 使用jquery在不同的表中显示对象的元素？,javascript,jquery,html,jsrender,Javascript,Jquery,Html,Jsrender,这是我的jsrender html <script id="pageDetails1" type="text/x-jsrender"> <tr> <td class="hidden-xs">{{>pageName}}</td> <td class="hidden-xs">{{>pageCount}}</td> </tr> </script>

这是我的jsrender html

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

我想要的是：是获取pageDetails1 id中的前10个元素，然后是pageDetails2中的下10个元素，然后是pageDetails3中的下10个元素

我得到的是：它显示了所有对象的相同值。即pageDetails1、pageDetails2、pageDetails3显示相同的元素

有人能建议如何解决这个问题吗？

一个名为tdaPages的数组是的，这对所有人都是一样的。使用索引检查不同页面详细信息部分的计数器

<!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>

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

<!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>