题目:用户输入行和列,动态创建表格:
方法一:createElement(),创建标签(缺点:每创建表格在原来的基础上新建表格)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态添加表格-createElement方法</title>
</head>
<body>
<form>
行:<input type="text" id="col">
列:<input type="text" id="row">
<input type="button" value="创建表格" onclick="creatTable()"><br/>
</form>
<table border="1" style="width:500px;height: 500px;background:pink;" id="tab"></table>
<script>
var table=document.getElementById("tab");
function creatTable(){
var col=document.getElementById("col").value;
var row=document.getElementById("row").value;
for(var n=0;n<col;n++){
//创建<tr></tr>标签
var hang=document.createElement("tr");
for(var m=0;m<row;m++){
//创建<td></td>标签
var lie=document.createElement("td");
//将列元素添加到行元素中。形式:<tr><td></td><td></td>........</tr>
hang.appendChild(lie);
}
//将行元素添加到表格中
table.appendChild(hang);
}
}
</script>
</body>
</html>
方法二:标签拼接(无以上缺点)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态添加表格-标签拼接</title>
</head>
<body>
<form>
行:<input type="text" id="col">
列:<input type="text" id="row">
<input type="button" value="创建表格" onclick="creatTable()"><br/>
</form>
<table border="1" style="width:500px;height: 500px;background:pink;" id="tab"></table>
<script>
var table=document.getElementById("tab");
function creatTable(){
var col=document.getElementById("col").value;
var row=document.getElementById("row").value;
var str="";
for(var n=0;n<col;n++){
//表格行元素的开始标记<tr>
str=str+"<tr>";
for(var m=0;m<row;m++){
//表格列标签<td></td>
str=str+"<td>"+"</td>";
}
//表格行元素的结束标记</tr>
str=str+"</tr>";
table.innerHTML=str;
}
}
</script>
</body>
</html>
方法三:标签拼接+变量指向函数(var 变量名=函数名;)无以上缺点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态添加表格</title>
</head>
<body>
<form>
行:<input type="text" id="col">
列:<input type="text" id="row">
<input type="button" value="创建表格" onclick="fun()"><br/>
</form>
<table border="1" style="width:500px;height: 500px;background:pink;" id="tab"></table>
<script>
var table=document.getElementById("tab");
//第四步:creatTable()函数接收,进行传参(写上传参的值)
function creatTable(col,row){
var str="";
for(var n=0;n<col;n++){
//表格行元素的开始标记<tr>
str=str+"<tr>";
for(var m=0;m<row;m++){
//表格列标签<td></td>
str=str+"<td>"+"</td>";
}
//表格行元素的结束标记</tr>
str=str+"</tr>";
table.innerHTML=str;
}
}
//第三步:对象指向函数
var obj=creatTable;//不加括号
//第一步:点击函数:定义变量获取两个的值
function fun(){
var col=document.getElementById("col").value;
var row=document.getElementById("row").value;
//第二步:传参,将两个值传给变量
obj(col,row);
}
</script>
</body>
</html>