Question

中的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>

如果您需要任何其他信息，请与我们联系。

谢谢

Answer 1

感谢大家对此进行调查！我得到了解决方案!!

我所做的只是： -

我在每个

之外添加了<a class="various" href="#inline">个标记

<div class="bin">... </div></a>

例如： -

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

将id="inline"提供给动态表生成的div： -

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

再次感谢

如何在灯箱中显示动态数据

1 个答案: