如何在具有某些約束的html中動態創建表？
[英]How to dynamically create table in html with certain constraints?
問題描述
我想從用戶（編號）輸入並顯示與編號相同的次數。如果用戶輸入5，則該圖像應與圖像相鄰顯示5次，並在圖像下方顯示相應的編號-第一圖像'1'下第二圖像'2'。基本上將此表放入循環中。
<HTML> <BODY> <TABLE> <TR> <TD> <IMG SRC="C:/Users/User/Desktop/RE/G.JPG"> </TD> </TR> <TR><TD ALIGN="CENTER">1</TD> </TABLE>" </BODY> </HTML>
5 個解決方案
解決方案1
1 2015-04-09 09:42:49
您可以添加輸入和按鈕來觸發功能。 您還可以檢查插入的值是否實際上是一個數字。
$(document).on('click', '#add', function() { var that = $(this); var times = parseInt($('#times').val()); for (i=1;i<=times;i++) { $('#table-wrp').append('<table class="table-times"><tbody><tr><td><img src="http://code52.org/aspnet-internationalization/icon.png" /></td></tr><tr><td>' + i + '</td></tr></tbody></table>'); } }); $(document).on('input', '#times', function() { var that = $(this); var value = that.val(); if ((value != '' || value != false) && !isNaN(value)) { $('#add').prop('disabled', false); } else { $('#add').prop('disabled', true); } });
#table-wrp { height: 80px; } .table-times { width: 100px; height: 80px; float: left; border-collapse: collapse; } .table-times td { border: 1px solid #d8d8d8; text-align: center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <input type="textbox" id="times" /> <button id="add" disabled>Add</button> <div id="table-wrp"></div>
解決方案2
1 2015-04-09 09:45:18
您可以使用jQuery來完成此任務，並編寫一個函數來生成具有動態值的HTML：
完整的解決方案
<HTML>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
function generateTable(number) {
return "<table><tr><td>" +
"<img src='C:/Users/User/Desktop/RE/G.JPG'></td></tr><tr><td align='center'>" +
number +
"</td></table>";
}
$(function(){
var userInput = 3;
for (var i = 0; i < userInput; i++) {
$('#dynamic').append(generateTable(i + 1));
}
});
</script>
</head>
<body>
<div id='dynamic'></div>
</body>
</html>
解決方案3
0 2015-04-09 09:37:59
嘗試這個
$(function() { var tab = "<div></div>"; var num = prompt("Enter a number"); for (i = 0; i < num; i++) { $("#tab").append("<div class='left'><div><img src='http://placehold.it/150x150'></div><div>" + (i + 1) + "</div></div>"); } });
div.left { display: inline-block; margin-right: 5px; }
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </head> <body> <div id="tab"> </div> </body> </html>
解決方案4
0 2015-04-09 09:44:09
或獲取Pugazh答案的純JavaScript版本
var tab = "<div></div>"; var num = prompt("Enter a number"); for(i = 0; i < num; i++){ document.getElementById('tab').innerHTML += "<div><div><img src='http://placehold.it/150x150'></div><div></div></div>"; }
img{ float: left; box-shadow: 5px 5px 10px rgba(0,0,0,0.4); height: 100px; width: 100px; margin: 10px; }
<div id="tab"></div>
這將同樣有效，但也不需要jQuery。
解決方案5
0 2015-04-09 09:45:04
<HTML>
<BODY>
<div id="tbl"></div>
</BODY>
</HTML>
<script>
var num = prompt("Enter a number");
var div=document.getElementById("tbl");
var l1='',l2="";
for(i=0;i<num;i++)
{
l1 += '<td><img src="C:/Users/User/Desktop/RE/G.JPG"></td>';
l2 += '<td>'+i+'</td>';
}
div.innerHTML = "<table><tr>"+l1+"</tr><tr>" + l2 + "</tr></table>";
</script>
如何動態創建JSON數據的HTML表？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.