<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
body {
text-align: center;
}
</style>
<body>
<div id="box1">
行数:
<input type="text" id="rows" />
<br />
列数:
<input type="text" id="cols" />
<br>
<button type="button" id="btn01">输出</button>
</div>
<div id="box2">
<table border="" cellspacing="" cellpadding="">
<tr><th>Header</th></tr>
<tr><td>Data</td></tr>
</table>
</div>
<script type="text/javascript">
window.onload = function() {
//创建一个单击响应函数
//需求是获取一个按钮的id,然后绑定一个函数,那么参数就有两个一个是id一个是函数
myClick("btn01", function() {
var rows = document.getElementById("rows").value;
var cols = document.getElementById("cols").value;
var table = document.getElementsByTagName("table")[0];
for (var i = 0; i < rows; i++) {
var tr = document.createElement("tr");
for (var j = 0; j < cols; j++) {
var td = document.createElement("td");
tr.appendChild(td);
}
table.appendChild(tr);
}
});
function myClick(idStr, fun) {
var btn = document.getElementById(idStr);
btn.onclick = fun();
}
};
</script>
</body>
</html>
代码如上,反反复复看了好多遍,始终没有找到问题
你这个点击事件没绑定上，只有第一次进来运行了，你可以在myclick里console一个值，会发现点击输出不管用。因为第一次没给行数和列数所以不管用。可以参考我这个
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
body {
text-align: center;
}
</style>
<body>
<div id="box1">
行数:
<input type="text" id="rows" />
<br /> 列数:
<input type="text" id="cols" />
<br>
<button type="button" id="btn01">输出</button>
</div>
<div id="box2">
<table border="" cellspacing="" cellpadding="">
<tr>
<th>Header</th>
</tr>
<tr>
<td>Data</td>
</tr>
</table>
</div>
<script type="text/javascript">
window.onload = function() {
//创建一个单击响应函数
//需求是获取一个按钮的id,然后绑定一个函数,那么参数就有两个一个是id一个是函数
var btn = document.getElementById("btn01");
btn.addEventListener("click", () => {
myClick();
})
// myClick("btn01", function() {
// console.log("999")
// var rows = document.getElementById("rows").value;
// var cols = document.getElementById("cols").value;
// var table = document.getElementsByTagName("table")[0];
// for (var i = 0; i < rows; i++) {
// var tr = document.createElement("tr");
// for (var j = 0; j < cols; j++) {
// var td = document.createElement("td");
// tr.appendChild(td);
// }
// table.appendChild(tr);
// }
// });
function myClick() {
var rows = document.getElementById("rows").value;
var cols = document.getElementById("cols").value;
var table = document.getElementsByTagName("table")[0];
for (var i = 0; i < rows; i++) {
var tr = document.createElement("tr");
for (var j = 0; j < cols; j++) {
var td = document.createElement("td");
tr.appendChild(td);
}
table.appendChild(tr);
}
}
};
</script>
</body>
</html>
多行文本框采用的是textarea，rows和cols是它的一个属性
求大佬分析一下啊！！！拜谢！！！