求大神帮忙看看,该如何在javascript中把函数的输入内容和结果动态生成表格?

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

翻翻过去那场雪
浏览 376回答 2
2回答

一只萌萌小番薯

<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>

繁花如伊

feipigzi&nbsp;的代码没有给机会输入行列数,而且使用的&nbsp;createElement&nbsp;和&nbsp;appendChild。我还是比较赞成使用较规范的&nbsp;insertRow&nbsp;和&nbsp;insertCell。<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><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;/>
打开App,查看更多内容
随时随地看视频慕课网APP