如何在javascript中把函数的输入内容和结果动态生成表格？

Question

如何在javascript中把函数的输入内容和结果动态生成表格？就是输入两个变量，点一个按钮，自动生成个表格

Answer 1

feipigzi&nbsp;的代码没有给机会输入行列数，而且使用的&nbsp;createElement&nbsp;和&nbsp;appendChild。我还是比较赞成使用较规范的&nbsp;insertRow&nbsp;和&nbsp;insertCell。1234567891011121314151617181920<script type="text/javascript">window.onload =&nbsp;function() {&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("add").onclick =&nbsp;function() {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;rows = parseInt(document.getElementById("rows").value),&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols = parseInt(document.getElementById("cols").value);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(rows && cols) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;table = document.createElement("table");&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;table.border = 1;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(var&nbsp;r = 0; r < rows; r++) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;row = table.insertRow(-1);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(var&nbsp;c = 0; c < cols; c++) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;cell = row.insertCell(-1);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cell.innerHTML =&nbsp;"行"&nbsp;+ (r + 1) +&nbsp;"列"&nbsp;+ (c + 1);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.body.appendChild(table);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;};};</script>123<input&nbsp;type="text"&nbsp;size="4"&nbsp;id="rows"&nbsp;value=""&nbsp;/> 行<input&nbsp;type="text"&nbsp;size="4"&nbsp;id="cols"&nbsp;value=""&nbsp;/> 列<input&nbsp;type="button"&nbsp;id="add"&nbsp;value="生成表格"&nbsp;/>

Answer 2

你说的表格是指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>