首頁猿問如何在javascript中把函數(shù)...

如何在javascript中把函數(shù)的輸入內(nèi)容和結(jié)果動(dòng)態(tài)生成表格？

Vue.js

慕碼人2483693 2019-02-06 11:07:07

如何在javascript中把函數(shù)的輸入內(nèi)容和結(jié)果動(dòng)態(tài)生成表格？就是輸入兩個(gè)變量，點(diǎn)一個(gè)按鈕，自動(dòng)生成個(gè)表格

查看完整描述

2 回答

慕姐8265434

TA貢獻(xiàn)1813條經(jīng)驗(yàn) 獲得超2個(gè)贊

feipigzi 的代碼沒有給機(jī)會(huì)輸入行列數(shù)，而且使用的 createElement 和 appendChild。我還是比較贊成使用較規(guī)范的 insertRow 和 insertCell。

1234567891011121314151617181920 <script type="text/javascript">window.onload = function() { document.getElementById("add").onclick = function() { var rows = parseInt(document.getElementById("rows").value), cols = parseInt(document.getElementById("cols").value); if(rows && cols) { var table = document.createElement("table"); table.border = 1; for(var r = 0; r < rows; r++) { var row = table.insertRow(-1); for(var c = 0; c < cols; c++) { var cell = row.insertCell(-1); cell.innerHTML = "行" + (r + 1) + "列" + (c + 1); } } document.body.appendChild(table); } };};</script>

123	`<input` `type="text"` `size="4"` `id="rows"` `value=""` `/> 行<input` `type="text"` `size="4"` `id="cols"` `value=""` `/> 列<input` `type="button"` `id="add"` `value="生成表格"` `/>`

反對(duì) 回復(fù) 2019-03-14

交互式愛情

TA貢獻(xiàn)1712條經(jīng)驗(yàn) 獲得超3個(gè)贊

你說的表格是指html中的表格么？

<input type="text" id="input"/>
<input id="goBtn" type="button" value="GO"/>
<script>
document.getElementById('goBtn').onclick = function () {
var value = document.getElementById('input').value;
if(!value) return;
var table = document.createElement('table');
table.setAttribute("border", '1px');
document.body.appendChild(table);
for(var i = 0; i < 3; i++) {
var row = document.createElement('tr');
for(var k = 0; k < 4; k++) {
var cell = document.createElement('td');
cell.appendChild(document.createTextNode(value));
row.appendChild(cell);
}
table.appendChild(row);
}
};
</script>