<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.tableCls, .tableCls td{
border: 1px solid red;
border-collapse: collapse;
}
</style>
</head>
<body>
表格的行数:<input type="text" id="rowsCount"><br>
表格的列数:<input type="text" id="colsCount"><br>
<button id="createTable">创建表格</button>
<div id="table-wrap" class="wrap"></div>
<script>
var createTableBtn = document.querySelector("#createTable");
//给button添加点击事件
createTableBtn.onclick = function(){
// 获取用户输入的行数和列数
var rowsCount = parseInt(document.querySelector("#rowsCount").value);
var colsCount = parseInt(document.querySelector("#colsCount").value);
console.log("行数:" + rowsCount + ",列数:" + colsCount);
var tableStr = "<table class='tableCls'>"; //表格的字符串代码
var tableWrap = document.querySelector("#table-wrap");
var rowStr = ""; //行的字符串的代码
// 拼接创建行和列
for(let i=1;i<=rowsCount;i++){
rowStr += "<tr class='tr-"+ i +"'>";
// <tr class='tr-1'>
var tdStr = "";
for(let j=1;j<=colsCount;j++){
tdStr += "<td>这是第"+i+"行第"+j+"列的单元格</td>";
}
// <td>这是第1行第1列的单元格</td><td>这是第1行第2列的单元格</td>
rowStr = rowStr + tdStr + "</tr>";
}
// console.log(rowStr);
tableStr = tableStr + rowStr + "</table>";
// console.log(tableStr);
tableWrap.innerHTML = tableStr;
};
</script>
</body>
</html>