DOM中对表格的操作
思考:对表格操作都是对表格哪些东西进行操作?
答:对表格中的属性和方法进行操作
表格中有哪些常用的属性和方法?
下面表格中列出了常用的表操作的属性和方法
下面利用代码演示对表格的四种操作
1.表格的行遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>遍历行</title>
<script>
function disScore() {
//得到表格
var tab = document.getElementById("tabScore");
//得到表格中的所有行
var rows = tab.rows;
for (var i = 1; i < rows.length; i++) {
//得到每行的各项内容
var name = rows[i].childNodes[0].innerText;
var java = rows[i].childNodes[1].innerText;
var html = rows[i].childNodes[2].innerText;
var sql = rows[i].childNodes[3].innerText;
var count = rows[i].childNodes[4].innerText;
alert(name + ":" + java + "," + html + "," + sql + "," + count);
}
}
</script>
</head>
<body>
<input type="button" value="查看表中成绩" onClick="disScore()">
<hr size="1px">
<table id="tabScore" width="470px" border="1px solid #003399" align="center">
<tr bgcolor="#0099ff">
<th>姓名</th>
<th>Java</th>
<th>HTML</th>
<th>SQL</th>
<th>总成绩</th>
</tr>
<tr>
<td align="center">张三</td>
<td align="center">87</td>
<td align="center">92</td>
<td align="center">79</td>
<td align="center">258</td>
</tr>
<tr>
<td align="center">李四</td>
<td align="center">70</td>
<td align="center">80</td>
<td align="center">75</td>
<td align="center">225</td>
</tr>
</table>
</body>
</html>
2.表格中添加行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在表格中添加行</title>
<script>
function addScore() {
//得到输入数据
var name = document.getElementById("username").value;
var java = document.getElementById("java").value;
var html = document.getElementById("html").value;
var sql = document.getElementById("sql").value;
var count = parseInt(java) + parseInt(html) + parseInt(sql);
//得到表格
var tab = document.getElementById("tabScore");
//创建行
var row = tab.insertRow();
//在行中添加单元格
var td_name =row.insertCell();
//设置文本居中对齐
td_name.style.textAlign = "center";
//设置单元格的值
td_name.innerText = name;
var td_java =row.insertCell();
td_java.style.textAlign = "center";
td_java.innerText = java;
var td_html =row.insertCell();
td_html.style.textAlign = "center";
td_html.innerText = html;
var td_sql =row.insertCell();
td_sql.style.textAlign = "center";
td_sql.innerText = sql;
var td_count =row.insertCell();
td_count.style.textAlign = "center";
td_count.innerText = count;
}
</script>
</head>
<body>
<center>
姓名:<input type="text" id="username" size="10">
Java:<input type="text" id="java" size="3" maxlength="2">
HTML:<input type="text" id="html" size="3" maxlength="2">
SQL:<input type="text" id="sql" size="3" maxlength="2">
<input type="button" value="添加" onclick="addScore()">
<hr size="1">
<table id="tabScore" width="470px" border="1px solid #003399" align="center">
<tr bgcolor="#0099ff">
<th>姓名</th>
<th>Java</th>
<th>HTML</th>
<th>SQL</th>
<th>总成绩</th>
</tr>
</table>
</center>
</body>
</html>
3.表格中删除行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>遍历行</title>
<script>
function deleteScore() {
//得到表格
var tab = document.getElementById("tabScore");
//得到表格中的所有行
var rows = tab.rows;
//计算表中数据条数
var len = rows.length - 1;
if(len>0){
//通过行的索引编号删除行
tab.deleteRow(len);
}
else
{
alert("已经没有可删除的学生成绩了!");
}
}
</script>
</head>
<body>
<input type="button" value="删除最后一个学生成绩" onClick="deleteScore()">
<hr size="1px">
<table id="tabScore" width="470px" border="1px solid #003399" align="center">
<tr bgcolor="#0099ff">
<th>姓名</th>
<th>Java</th>
<th>HTML</th>
<th>SQL</th>
<th>总成绩</th>
</tr>
<tr>
<td align="center">张三</td>
<td align="center">87</td>
<td align="center">92</td>
<td align="center">79</td>
<td align="center">258</td>
</tr>
<tr>
<td align="center">李四</td>
<td align="center">70</td>
<td align="center">80</td>
<td align="center">75</td>
<td align="center">225</td>
</tr>
</table>
</body>
</html>
4.表格中下拉列表的联动操作设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作下拉列表的联动效果</title>
<script>
function choose() {
var pSel = document.getElementById("province").value;
var city = document.getElementById("city");
//删除下拉列表中原有的所有徐阿娘
city.options.length = 0;
if( pSel == "重庆"){
//创建下拉列表框的选项
var cq = new Option("重庆","重庆");
//将选项添加到下拉框中
city.options.add(cq);
var wz = new Option("万州","万州");
city.options.add(wz);
var kx = new Option("开县","开县");
city.options.add(kx);
var hc = new Option("合川","合川");
city.options.add(hc);
}
else if( pSel == "四川"){
//创建下拉列表框的选项
var cd = new Option("成都","成都");
//将选项添加到下拉框中
city.options.add(cd);
var djy = new Option("都江堰","都江堰");
city.options.add(djy);
var wc = new Option("汶川","汶川");
city.options.add(wc);
var ls = new Option("乐山","乐山");
city.options.add(ls);
}
}
</script>
</head>
<body>
<center>
<select name="" id="province" onchange="choose()">
<option value="重庆">重庆</option>
<option value="四川">四川</option>
</select>省(/直辖市)
<select name="" id="city">
<option value="重庆">重庆</option>
<option value="万州">万州</option>
<option value="开县">开县</option>
<option value="合川">合川</option>
</select>
</center>
</body>
</html>
方法未必简便,欢迎大家留言修正,共同进步