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

To show the elements of an object in differrent tables using jquery?

本文关键字：显示 对象 元素 使用 jquery      更新时间：2023-09-26

这是我的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>

这是html表id，我将模板插入其中

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

下面是我用来将一个名为"tdaPages"的数组推送到这些id的jquery代码。

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

我想要什么：是在pageDetails1 id中获取前10个元素，然后在pageDetails2中获取下10个，然后在pageDetails3中获取下一个10个元素。

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

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

<!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>
相关文章：