0

jQuery テンプレート プラグインを使用して動的テーブルを作成しようとしています。

私の要件は、列が動的に作成されることです。つまり、ColumnNames を持つ ListBox があります...アイテムがクリックされると、その列でテーブルが作成され、別のアイテムがクリックされると、既存のテンプレートが更新され、2 番目の列が追加されます。 ...

次のコードサンプルを試していますが、うまくいきません...

どうすればそれができるか教えてもらえますか？

<!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 に答える