<html>
<head>
<meta charset="big5">
<title>DOM使用</title>
<style>
body,table,th,td{font-size:15px;}
#tabScore {border-collapse:collapse;}
#tabScore th{padding:5px}
#tabScore td{padding:5px}
</style>
<script>
function disScore(){
var tab=document.getElementById("tabScore");
var rows=tab.rows.length,name,java,html,sql,count;
for (i=1;i<rows;i++)
{
row=tab.rows[i];
name=row.childNodes[1].innerHTML;
java=row.childNodes[3].innerHTML;
html=row.childNodes[5].innerHTML;
sql=row.childNodes[7].innerHTML;
count=row.childNodes[9].innerHTML;
alert(name+":"+java+","+html+","+sql+","+count);
}
}
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.innerHTML=name;
var td_java=row.insertCell();
td_java.style.textAlign="center";
td_java.innerHTML=java;
var td_html=row.insertCell();
td_html.style.textAlign="center";
td_html.innerHTML=html;
var td_sql=row.insertCell();
td_sql.style.textAlign="center";
td_sql.innerHTML=sql;
var td_count=row.insertCell();
td_count.style.textAlign="center";
td_count.innerHTML=count;
}
</script>
</head>
<body>
姓名:<input type="text" id="userName" size="10" value=""/>
Java:<input type="text" id="java" size="3" maxlength="2" value=""/>
HTML:<input type="text" id="html" size="3"maxlength="2" value=""/>
Sqlserver:<input type="text" id="sql" size="3"maxlength="2" value=""/>
<input type="button" value="增加" onclick="addScore()"/>
<hr size="3"/>
<br>
<input type="button" value="檢視表中成績" onclick="disScore();">
<hr size="3">
<table id="tabScore" name="tabname" width="470" border="1" bordercolor="#003399" align="center">
<tr bgcolor="#0099FF">
<th>姓名</th><th>JAVA</th><th>HTML</th><th>SQLServer</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">54</td>
<td align="center">92</td>
<td align="center">87</td>
<td align="center">247</td>
</tr>
<tr>
<td align="center">王五</td>
<td align="center">94</td>
<td align="center">81</td>
<td align="center">67</td>
<td align="center">269</td>
</tr>
</table>
</body>
</html>
沒有留言:
張貼留言