I have an big table I need to create multiple times in the same page, but I'm not sure have to do. I thought the easiest way is to have the table as an partial view hidden on the page, and each time I need it I will clone it from my jQuery code. I know have to clone it, but I'm not sure have to insert the text into the specific span's, before I insert it.

This is a small example of my table. Can somebody help me with this problem

 < div id="ToClone">
            <table >
                <tr>
                    <td>
                        <table>
                            <tr><td><b>MMS_RepairLabel:</b></td><td align="right"><span id="RepairId"></span></td></tr>
                            <tr><td><b>MMS_MWTLabel:</b></td><td align="right"><span id="MWT"></span></td></tr>
                            <tr><td><b>MMS_MDTLabel:</b></td><td align="right"><span id="MDT"></span></td></tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
        <script>
            var History = (function () {
                $(function () {
                    var tblClone = $("#ToClone").clone();
                });
            }());
        </script>

I have an big table I need to create multiple times in the same page, but I'm not sure have to do. I thought the easiest way is to have the table as an partial view hidden on the page, and each time I need it I will clone it from my jQuery code. I know have to clone it, but I'm not sure have to insert the text into the specific span's, before I insert it.

This is a small example of my table. Can somebody help me with this problem

 < div id="ToClone">
            <table >
                <tr>
                    <td>
                        <table>
                            <tr><td><b>MMS_RepairLabel:</b></td><td align="right"><span id="RepairId"></span></td></tr>
                            <tr><td><b>MMS_MWTLabel:</b></td><td align="right"><span id="MWT"></span></td></tr>
                            <tr><td><b>MMS_MDTLabel:</b></td><td align="right"><span id="MDT"></span></td></tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
        <script>
            var History = (function () {
                $(function () {
                    var tblClone = $("#ToClone").clone();
                });
            }());
        </script>

• javascript
• jquery
• asp-mvc
• html-table

• What data needs to be changed in the table? Im guessing the bolded labels? – Botonomous Commented Oct 1, 2014 at 15:38
• 1 You have IDs in the HTML to be cloned, which is a big "no-no". You cannot wind up with duplicate IDs in the page. That is invalid HTML. – iCollect.it Ltd Commented Oct 1, 2014 at 15:42

2 Answers 2

You will need to resolve the problem of duplicate ids first. I suggest changing them to classes.

I remend a little trick of using a dummy script block for your template. This is great for maintenance and browsers just ignore the unknown type so you can insert any elements:

<script id="ToClone" type="text/template">
    <table>
        <tr>
            <td>
                <table>
                    <tr>
                        <td><b>MMS_RepairLabel:</b>
                        </td>
                        <td align="right"><span class="RepairId"></span>
                        </td>
                    </tr>
                    <tr>
                        <td><b>MMS_MWTLabel:</b>
                        </td>
                        <td align="right"><span class="MWT"></span>
                        </td>
                    </tr>
                    <tr>
                        <td><b>MMS_MDTLabel:</b>
                        </td>
                        <td align="right"><span class="MDT"></span>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</script>

Then clone with your inserted values like this:

    var $clone = $($('#ToClone').html());
    $('.RepairId', $clone).text(repairIdValue);
    $('.MDT', $clone).text(mdtValue);
    $('.MWT', $clone).text(mwtValue);
    // Do something with the clone

JSFiddle: http://jsfiddle/TrueBlueAussie/381ugdvr/1/

If i can get what you are looking for, look this solution:

jQuery:

$('.pasteTable').each(function(){

    var RepairId = $(this).data('repair-id');
    var MWT = $(this).data('mwt');
    var MDT = $(this).data('mdt');

    $(this).html('<table><tr><td><b>MMS_RepairLabel:</b></td><td align="right"><span class="RepairId">' + RepairId + '</span></td></tr><tr><td><b>MMS_MWTLabel:</b></td><td align="right"><span class="MWT">' + MWT + '</span></td></tr><tr><td><b>MMS_MDTLabel:</b></td><td align="right"><span class="MDT">' + MDT + '</span></td></tr></table>');
});

Anywhere in your code you want the table to be cloned, just insert a with 'data' attributes:

HTML:

<div class="pasteTable" data-repair-id="#1" data-mwt="baby" data-mdt="ball"></div>

Demo: http://jsfiddle/zf09m0at/3/