87,910
社区成员
发帖
与我相关
我的任务
分享前端，动态改变行和列的格数
前端新手一枚。创建栅格系统的网格行和列，可以动态改变的。功能是有一个行和列的下拉列表，最大数字是10，比如我选择3x9，我的页面就要显示3行9列，怎么用写。大佬求帮助。
...全文
请发表友善的回复…
发表回复
随_声 2019-07-16
- 打赏
- 举报
有反映了，谢谢大佬，刚刚忘记导入jsl了
随_声 2019-07-16
- 打赏
- 举报
点击没有反应
随_声 2019-07-16
- 打赏
- 举报
好像生成不了，点击没有反应
jio可 2019-07-09
- 打赏
- 举报
根据输入的值，循环生成行和列然后appendChild到table里面
usecf 2019-07-09
- 打赏
- 举报
<!Doctype html>
<head>
<meta charset="utf-8"/>
<script src="jquery-1.9.1.min.js" type="text/javascript" ></script>
<script type="text/javascript">
function btn_click()
{
var input_row = document.getElementById("input_row");
var input_col = document.getElementById("input_col");
var tb = document.getElementById("tb");
var tb_col ="";
var tb_colTmp ="";
var tb_row="";
var tb_rowTmp="";
for (var i = 0; i < input_row.value; i++)
{
var tableData="<tr>";
for (var j = 0; j < input_col.value; j++)
{
tb_colTmp='<td>'+j+'</td>';
tableData+=tb_colTmp;
}
tb_rowTmp=tableData+"</tr>";
tb_row+=tb_rowTmp;
}
$("#tb").html(tb_row);
}
</script>
</head>
<body>
<input type="text" value="" id="input_row"/>
<input type="text" value="" id="input_col"/>
<input type="button" value="动态生成表格" onclick="btn_click()">
<table id="tb" border="1" cellpadding=5 cellspacing=3>
</table>
</body>
</html>
Hello World, 2019-07-09
- 打赏
- 举报
#div_table {
height: 300px;
}
#div_table table {
width: 100%;
empty-cells: show;
border: 1px green solid;
border-collapse: collapse;
}
#div_table table tr {
height: 30px;
}
#div_table table tr td {
border: 1px green solid;
}
<input type="button" value="生成表格" onclick="createTable();" />
<div id="div_table"></div>
<script src="../../Scripts/jquery-1.9.1.min.js"></script>
var r = document.getElementById('r'),
c = document.getElementById('c');
for (var i = 1; i < 11; i++) {
$('<option value="' + i + '">' + i + '</option>').appendTo(r);
$('<option value="' + i + '">' + i + '</option>').appendTo(c);
}
function createTable() {
var table = '<table>';
for (var i = 0; i < r.value; i++) {
table += '<tr>';
for (var j = 0; j < c.value; j++) {
table += '<td></td>';
}
table += '</tr>';
}
table += '</table>';
$('#div_table').html(table);
}随_声 2019-07-09
- 打赏
- 举报
我想过用在js里写for循环，但无从下手
