我正在使用来自“http://fancyapps.com/fancybox/”的 FancyBox 灯箱
我想在此 Lightbox 中显示运行时生成的“动态表格”。
请找到将在运行时单击任何 时生成的表的代码<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>
如果您需要任何其他信息，请告诉我。
谢谢
最佳答案
感谢大家的关注!我得到了解决方案!!
我所做的只是:-
我给了<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>
再次感谢
关于javascript - 如何在灯箱中显示动态数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18721566/