Dynamic Table using jQuery template

I am trying to create a Dynamic Table using jQuery Template plugin.

My requirement is that columns are created dynamically i.e. there is a ListBox with ColumnNames... when item is clicked it should create a table with that column and when another item is clicked it should update the existing template and add the second column and so on...

I am trying with the following code sample but no luck...

Can anyone tell me how can I do it?

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

Answers


I solved this by removing markup += createHeaderMarkup(); from for loop


Need Your Help

How to train a Support Vector Machine(svm) classifier with openCV with facial features?

c opencv svm face-detection feature-detection

I want to use the svm classifier for facial expression detection. I know opencv has a svm api, but I have no clue what should be the input to train the classifier. I have read many papers till now,...

Dynamic android form from XML

android xml android-layout android-asynctask android-custom-view

I want to generate a form into my activity_main.xml ScrollView. XML is loaded and parsed correctly but when I'm trying to addView(LinearLayout) then it throws exception e. My application gets url o...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.