怎样用js实现
发布网友
发布时间：2022-04-23 19:10
共2个回答
热心网友
时间：2022-05-19 00:12
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这样用JS实现</title>
<style type="text/css">
table {
border-collapse: collapse;
border-spacing:0;
}
table tr: nth-child(odd){
background-color: #ddd;
}
table td{
border: 1px solid #000;
}
</style>
</head>
<body>
<span>表格行数</span>:<input type="number" id="row" value=6>
<span>表格列数</span>:<input type="number" id="col" value=8>
<button id="btn">绘制表格</button>
<table><tbody></tbody></table>
<script type="text/javascript">
btn.onclick = function(){
var rowNo = row.value, colNo = col.value;
if (rowNo < 1) {
alert('行数非法');
return;
}
if (colNo < 1) {
alert('列数非法');
return;
}
var tbodyHtml = '';
for (var i = 0; i < rowNo; i++) {
tbodyHtml += '<tr>';
for (var j = 0; j < colNo; j++) {
tbodyHtml += '<td>(' + (i + 1) + ',' + (j + 1) + ')</td>';
}
tbodyHtml += '</tr>';
}
document.getElementsByTagName('tbody')[0].innerHTML = tbodyHtml;
};
</script>
</body>
</html>
追问没有颜色效果，另外可不可以在js中加一下注释。我刚学，和老师教的有点不一样，有点看不懂，谢谢啦
追答电脑端发你私信了，文字太长，分开发了
热心网友
时间：2022-05-19 01:30
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<style>
table { border-collapse:collapse; border-spacing:0; }
table tr:nth-child(odd){background:#999;}
table td{border:1px solid #000;}
</style>
</head>
<body>
<div>表格行数：<input type="text" id="row" value="6"/></div>
<div>表格列数：<input type="text" id="col" value="8"/><input type="button" id="btn" value="创建"/></div>
<script>
document.getElementById("btn").onclick = function(){
var row = parseInt(document.getElementById("row").value);
var col = parseInt(document.getElementById("col").value);
if(!/^[1-9]\d*$/.test(row)||!/^[1-9]\d*$/.test(row)){return false;}
if(document.getElementById("table")){document.body.removeChild(document.getElementById("table"));}
var table = document.createElement("table");
table.id = "table";
for(var i=0;i<row;i++){
var tr = document.createElement("tr");
for(var j=0;j<col;j++){
var td = document.createElement("td");
td.innerHTML = "("+(i+1)+","+(j+1)+")";
tr.appendChild(td);
}
table.appendChild(tr);
}
document.body.appendChild(table);
}
</script>
</body>
</html>
