网页当中为了直观有序的显示数据一般用表格组织数据。
下面给出javascrip操作表格的代码：
<html>
<head>
<title>遍历表格</title>
<style type="text/css">
body,table,th,td,{font-size: 15px}
#tablescore{border-collapse: collapse;}
#tablescore th{padding: 10px;}
#tablescore td{padding: 10px;}
</style>
</head>
<script type="text/javascript">
function disscore()
{
var tab=document.getElementById("tablescore")
var rows=tab.rows
for(var i=1;i<rows.length;i++)
{
var name=rows[i].cells[0].innerHTML;
var java=rows[i].cells[1].innerHTML;
var html=rows[i].cells[2].innerHTML;
var total=rows[i].cells[3].innerHTML;
alert(name+":"+java+","+html+","+total)
}
}
function addscores()
{
var name=document.getElementById("name").value
var java=document.getElementById("java").value
var html=document.getElementById("html").value
var total=document.getElementById("total").value
if(name==""||java==""||html==""||total=="")
{
alert("内容不能为空！")
return;
}
var tab=document.getElementById("tablescore")
var row=tab.insertRow(-1)//添加一行 空白
var temp=row.insertCell(-1)//添加一个单元格 空白
temp.style.textAlign="center"
temp.innerText=name
temp=row.insertCell(-1)//添加一个单元格 空白
temp.style.textAlign="center"
temp.innerText=java
temp=row.insertCell(-1)//添加一个单元格 空白
temp.style.textAlign="center"
temp.innerText=html
temp=row.insertCell(-1)//添加一个单元格 空白
temp.style.textAlign="center"
temp.innerText=total
}
function deletescore()
{
var tab=document.getElementById("tablescore")
var cnt=tab.rows.length;
if(cnt>1)
tab.deleteRow(cnt-1)
else
alert("没有内容可以删除了！")
}
</script>
<body>
name:<input type="text"id="name" size="10"/>
java:<input type="text" id="java" size="3"/>
html:<input type="text" id="html" size="3"/>
total:<input type="text" id="total" size="3/">
<input type="button" value="add" onclick="addscores()">
<input type="button" value="delete" onclick="deletescore()">
<br>
<br>
<table id="tablescore" width="650" border="1" bordercolor="#003399" align="left">
<tr bgcolor="#0099ff">
<th>name</th> <th>java</th> <th>html</th> <th>total</th>
</tr>
<tr>
<td align="center">jack</td>
<td align="center">98</td>
<td align="center">88</td>
<td align="center">68</td>
</tr>
<tr>
<td align="center">marry</td>
<td align="center">77</td>
<td align="center">68</td>
<td align="center">80</td>
</tr>
</table>
</body>
</html>
javascrip操作表格元素,布布扣,bubuko.com
原文：http://blog.csdn.net/linsheng9731/article/details/24119391