About append funciton of template

About append funciton of template

Hi:

I try to develop an template to add table automatically, and meeting an problem,

my code snippet is as following:


  1. <div style="margin: 20px auto; width: 500px;">
        <table id="jsonTable2" border="1" style="border-collapse: collapse;" cellpadding="5" class="table">

        </table>
    </div>


      <script type="text/x-template" class="myTemplate">
                <thead>
                    <tr>
                        <th>Model</th>
                        <th>Name</th>
                        <th>Share</th>
                        <th>Price Range</th>
                        <th>Brand</th>
                    </tr>
                </thead>

                <tbody>
                     <tr>
                        <td columName="Model"></td>
                        <td columName="Name"></td>
                        <td columName="Share"></td>
                        <td columName="Price Range"></td>
                        <td columName="Brand"></td>
                    </tr>
                </tbody>
            </script>

And then when I using following jquery codes to add node to jsonTable2

  1.  var myTemplate = $($("script.myTemplate").html());
                        var mythread = myTemplate.clone(true);
                        var mythread2 = mythread.children("thead");
                        $("#jsonTable2").append(mythread2);

it fail, I just want to add each node individually, but things not go right way.

Is there any way to cover that, thanks a lot.