您的位置：首页 > Web前端 > JavaScript

javascript-第六节-动态添加表格（三种方法）

2016-06-07 22:23 603 查看

题目：用户输入行和列，动态创建表格：

方法一：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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航