0

我正在尝试使用 jQuery 模板插件创建一个动态表。

我的要求是动态创建列，即有一个带有 ColumnNames 的 ListBox ...单击项目时，它应该使用该列创建一个表，当单击另一个项目时，它应该更新现有模板并添加第二列，依此类推...

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

谁能告诉我该怎么做？

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

1 回答 1

0

我通过删除 标记解决了这个问题 += createHeaderMarkup(); 从 for 循环

于 2012-09-13T13:32:40.393 回答