javascript - ライトボックスに動的データを表示する方法

Question

「 http://fancyapps.com/fancybox/」の FancyBox ライトボックスを使用しています

このライトボックスで、実行時に生成される「動的テーブル」を表示したいと思います。

いずれかをクリックすると実行時に生成されるテーブルのコードを見つけてください<div class="bin">

    <div class="vault overflowHidden">
    <div class="floatLeft">
        <div class="bin" data-cols="4" data-rows="3">
            <div class="number">S1</div>
            <div class="type">4x3</div>
            <div class="description">
                Designed to hold max size packages.
                    <br>
                Est. capacity: 23 pkgs
            </div>
        </div>
        <div class="bin" data-cols="5" data-rows="4">
            <div class="number">S3</div>
            <div class="type">5x4</div>
            <div class="description">Est. capacity: 34.5 packages</div>
        </div>
        <div class="bin" data-cols="7" data-rows="4">
            <div class="number">S4</div>
            <div class="type">7x4</div>
            <div class="description">Est. capacity: 72.8 packages</div>
        </div>
        <div class="bin" data-cols="9" data-rows="5">
            <div class="number">S5</div>
            <div class="type">9x5</div>
            <div class="description">Est. capacity: 121 packages</div>
        </div>
        <div class="bin" data-cols="4" data-rows="3">
            <div class="number">S6</div>
            <div class="type">4x3</div>
            <div class="description">
                Designed to hold max size packages.
                    <br>
                Est. capacity: 23 packages
            </div>
        </div>
        <div class="bin repack" data-cols="9" data-rows="5">
            <div class="number">S8</div>
            <div class="type">9x5 Repack</div>
            <div class="description">Est. capacity: 117 packages</div>
        </div>
    </div>
    <div class="floatRight">
        <div class="bin repack" data-cols="9" data-rows="5">
            <div class="number">S2</div>
            <div class="type">9x5 Repack</div>
            <div class="description">Est. capacity: 117 packages</div>
        </div>
        <div class="loader">
            <div class="lot" data-cols="8" data-rows="1">
                <div class="number">L1</div>
                <div class="type">42-50.5</div>
            </div>
            <div class="lot" data-cols="7" data-rows="1">
                <div class="number">L2</div>
                <div class="type">50.5-77.5</div>
            </div>
            <div class="lot" data-cols="4" data-rows="1">
                <div class="number">L3</div>
                <div class="type">93.6-119</div>
            </div>
            <div class="lot repack" data-cols="8" data-rows="1">
                <div class="number">L4</div>
                <div class="type">Repack</div>
            </div>
            <div class="lot removed">
                <div class="number">L5</div>
                <div class="type">42-50.5</div>
            </div>
            <div class="lot" data-cols="4" data-rows="1">
                <div class="number">L6</div>
                <div class="type">93.6-119</div>
            </div>
            <div class="lot" data-cols="8" data-rows="1">
                <div class="number">L7</div>
                <div class="type">42-50.5</div>
            </div>
            <div class="lot removed">
                <div class="number">L8</div>
                <div class="type">42-50.5</div>
            </div>
            <div class="lot" data-cols="7" data-rows="1">
                <div class="number">L9</div>
                <div class="type">50.5-77.5</div>
            </div>
        </div>
        <div class="bin" data-cols="9" data-rows="5">
            <div class="number">S7</div>
            <div class="type">9x5</div>
            <div class="description">Est. capacity: 121 packages</div>
        </div>
        <div class="bin" data-cols="5" data-rows="4">
            <div class="number">S9</div>
            <div class="type">5x4</div>
            <div class="description">Est. capacity: 34.5 packages</div>
        </div>
    </div>
</div>

上記の DIV をクリックすると生成されるテーブルは次のとおりです。

<div class="beanStructure overflowHidden">
    <div class="tableContainer">
        <table class="container">
        </table>
    </div>
</div>

テーブルを生成するためのJquery :-

    <script>

    function generateTable(rows, cols) {

        $('table.container').add

        $('table.container').each(function () {
            for (i = 0; i < rows; i++) {
                $(this).hide().append('<tr>').fadeIn(100);;
            }
        });
        $('table.container tr').each(function () {
            for (j = 0; j < cols; j++) {
                $(this).hide().append('<td></td>').fadeIn(100);;
            }
        });
    }

    $(function() {
        $('.bin, .lot').click(function() {
            var repack = '';
            if ($(this).hasClass('repack')) {
                repack = ' repack';
            }
            var myRows = $(this).attr('data-rows');
            var myCols = $(this).attr('data-cols');
            $("table.container").html('');
            $("div.tableContainer").removeClass().addClass('tableContainer bin-' + myCols + 'x' + myRows + repack + '');
            generateTable(myRows, myCols);
            //$('.beanStructure div').hide();
            //$('.beanStructure div.bin-' + $(this).children('.type').html() + '').show();
        });
    });

</script>

ライトボックスを呼び出すためのコード:-

<script>
    //Lightbox Function
    $(document).ready(function () {
        $(".various").fancybox({
            maxWidth: 1000,
            maxHeight: 800,
            fitToView: false,
            width: '80%',
            height: '80%',
            autoSize: false,
            closeClick: false,
            openEffect: 'none',
            closeEffect: 'none'
        });
    });
</script>

他の情報が必要な場合はお知らせください。

ありがとうございました