Question

我正在尝试使用jQuery Template插件创建动态表。

我的要求是动态创建列，即有一个带有ColumnNames的ListBox ...当单击item时，它应该创建一个包含该列的表，当单击另一个项时，它应该更新现有模板并添加第二列等等...

我正在尝试使用以下代码示例，但没有运气......

谁能告诉我怎么办呢？

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        table
        {
            border-collapse: collapse;
            margin: 8px;
            background-color: #f8f8f8;
            width:600px;
            overflow:scroll;
        }
        table td
        {
            border: 1px solid blue;
            padding: 3px;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"
        type="text/javascript"></script>
</head>
<body>
    <button id="showColBtn">
        CreateColumn</button><br />
    <table>
        <thead>
            <tr id="tblOrderReportHeaderRow">
            </tr>
        </thead>
        <tbody id="tblOrderReportBody">
        </tbody>
    </table>
    <script type="text/javascript">

        var markup = "";
        var arrTableHeader = [];

        /* Render the Column Name template */
        $("#showColBtn").click(function () {
            for (var i = 0; i <= 10; i++) {
                markup += createHeaderMarkup();
                arrTableHeader.push(createHeader("Col" + i));
            }
            /* Compile markup string as a named template */
            $.template("tblHeaderTemplate", markup);

            $("#tblOrderReportHeaderRow").empty();
            $.tmpl("tblHeaderTemplate", arrTableHeader).appendTo("#tblOrderReportHeaderRow");
        });

        function createHeaderMarkup() {
            return ("<th colspan='2'>${colName}</th>");

        }

        function createHeader(colName) {

            return ({ 'colName': colName });

        }

    </script>
</body>
</html>

Answer 1

我通过从for循环中删除 markup + = createHeaderMarkup（）; 来解决这个问题

使用jQuery模板的动态表

1 个答案: