JS通过输入值做表格的代码
发布网友
共2个回答
热心网友
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS 演示代码</title>
<style>
* {
margin: 0;
}
body {
background-color: rgb(44, 52, 55);
}
table {
border-collapse: collapse;
}
th,td {
border: 1px solid #fd3;
width: 20px;
height: 15px;
}
</style>
<script>
var proce = function() {
var tab = document.createElement("table");
var tb = document.createElement("tbody");
var i = r.value * 1;
var j = c.value * 1;
for (var m = 0; m < i; m++) {
var tr = tb.insertRow(tb.rows.length);
for (var n = 0; n < j; n++) {
tr.insertCell(tr.cells.length);
}
}
result.innerHTML = "";
tab.appendChild(tb);
result.appendChild(tab);
}
</script>
</head>
<body>行数：
<input type="text" id="r" />
<br />列数：
<input type="text" id="c" />
<br />
<button onclick="proce()">生成表格</button>
<div id="result"></div>
</body>
</html>
追问如果输入的不是数字，需要弹警告框应该怎么写呢？
追答var proce = function() {
var tab = document.createElement("table");
var tb = document.createElement("tbody");
var i = r.value * 1;
var j = c.value * 1;
if(isNaN(i) || isNaN(j)){
alert("不是数字， 采纳即可");
return;
}
for (var m = 0; m < i; m++) {
var tr = tb.insertRow(tb.rows.length);
for (var n = 0; n < j; n++) {
tr.insertCell(tr.cells.length);
}
}
result.innerHTML = "";
tab.appendChild(tb);
result.appendChild(tab);
}
热心网友
<meta charset="utf-8" />
行:<input type="text" id="H" /><br />
列:<input type="text" id="L" /><br />
<input type="button" value="打印表格" onclick="print()" /><br />
<div id="kk">rs，没有加判断，自己改</div>
<script type="text/javascript">
function print(){
var H=document.getElementById("H").value;
var L=document.getElementById("L").value;
var kk=document.getElementById("kk");
var rs="<table border='1'>";
for(var i=0;i<H;i++){
rs+="<tr>";
for(var j=0;j<L;j++){
rs+="<td>第"+(i+1)+"行，第"+(j+1)+"列</td>";
}
rs+="</tr>";
}
rs+="</table>";
kk.innerHTML=rs;
}
</script>
