作者supercygnus (......)
看板Web_Design
標題[問題] javascript表格新增資料表格抓資料
時間Fri Mar 29 15:18:21 2013
以下是程式碼
新增那個功能不能用,不知道是哪裏出了問題~?
檢視成績的時候印出的東西也怪怪的,會印出define,抓的資料也不完全
不知道是哪裏出了問題~?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<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;
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;
document.write(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.innerText=name;
var td_java=row.insertCell();
td_java.style.textAlign="center";
td_java.innerText=java;
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>
姓名:<input type="text" id="userNmae" size="10"/>
Java:<input type="text" id="java" size="3" maxlength="2"/>
HTML:<input type="text" id="html" size="3"maxlength="2"/>
Sqlserver:<input type="text" id="sql" size="3"maxlength="2"/>
<input type="button" value="增加" onclick="addScore()"/>
<hr size="3"/>
<br>
<input type="button" value="檢視表中成績" onclick="disScore();">
<hr size="3">
<table id="tabScore" 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>
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 111.246.201.24
1F：→ emn178:我想是document.write 之後, 資料就被清掉了? 03/29 17:11
2F：→ emn178:用console.log或alert看看 03/29 17:12
3F：→ supercygnus:試了好久,發現 03/29 21:51
4F：→ supercygnus:var name=rows[i].childNodes[0].innerText;根抓不到 03/29 21:51
5F：→ supercygnus:東西,到底要怎麼抓啊 03/29 21:51
6F：→ supercygnus:新增資料目前可以跑出來但是還是有問題 03/29 22:40
7F：→ supercygnus:Html欄位值不會出來 如圖那樣,到底是哪裏出錯了呢? 03/29 22:41
9F：推 s25g5d4:innerHTML 03/30 00:01
10F：推 s25g5d4:一個斷行或空白字元也算一個node 所以你可能抓到斷行 03/30 00:07
13F：→ dlikeayu:我想先問資料怎麼來的 04/01 08:10
14F：→ dlikeayu:以目前趨勢，資料來源是你能掌握的話 Html用來呈現 04/01 08:11
15F：→ dlikeayu:資料還是用Json Bson來規劃比較好 04/01 08:11
16F：→ dlikeayu:無論在效能上或是filter都有很大的幫助 04/01 08:14
17F：→ dlikeayu:不然這樣由後台產出的資料已經丟到排版上，再反過來用js 04/01 08:16
18F：→ dlikeayu:抓"view"裏的資料做排版，有點繞道 除非資料來源不可控 04/01 08:16