[問題] javascript表格新增資料表格抓資料

看板Web_Design作者 (......)時間12年前 (2013/03/29 15:18), 編輯推噓3(3015)
留言18則, 4人參與, 最新討論串1/1
以下是程式碼 新增那個功能不能用,不知道是哪裏出了問題~? 檢視成績的時候印出的東西也怪怪的,會印出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"/>&nbsp;&nbsp; Java:<input type="text" id="java" size="3" maxlength="2"/>&nbsp;&nbsp; HTML:<input type="text" id="html" size="3"maxlength="2"/>&nbsp;&nbsp; Sqlserver:<input type="text" id="sql" size="3"maxlength="2"/>&nbsp;&nbsp; <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

03/29 17:11, , 1F
我想是document.write 之後, 資料就被清掉了?
03/29 17:11, 1F

03/29 17:12, , 2F
用console.log或alert看看
03/29 17:12, 2F

03/29 21:51, , 3F
試了好久,發現
03/29 21:51, 3F

03/29 21:51, , 4F
var name=rows[i].childNodes[0].innerText;根抓不到
03/29 21:51, 4F

03/29 21:51, , 5F
東西,到底要怎麼抓啊
03/29 21:51, 5F

03/29 22:40, , 6F
新增資料目前可以跑出來但是還是有問題
03/29 22:40, 6F

03/29 22:41, , 7F
Html欄位值不會出來 如圖那樣,到底是哪裏出錯了呢?
03/29 22:41, 7F

03/29 22:42, , 8F
03/29 22:42, 8F

03/30 00:01, , 9F
innerHTML
03/30 00:01, 9F

03/30 00:07, , 10F
一個斷行或空白字元也算一個node 所以你可能抓到斷行
03/30 00:07, 10F

03/30 00:41, , 11F

03/30 00:42, , 12F
03/30 00:42, 12F

04/01 08:10, , 13F
我想先問資料怎麼來的
04/01 08:10, 13F

04/01 08:11, , 14F
以目前趨勢,資料來源是你能掌握的話 Html用來呈現
04/01 08:11, 14F

04/01 08:11, , 15F
資料還是用Json Bson來規劃比較好
04/01 08:11, 15F

04/01 08:14, , 16F
無論在效能上或是filter都有很大的幫助
04/01 08:14, 16F

04/01 08:16, , 17F
不然這樣由後台產出的資料已經丟到排版上,再反過來用js
04/01 08:16, 17F

04/01 08:16, , 18F
抓"view"裏的資料做排版,有點繞道 除非資料來源不可控
04/01 08:16, 18F
文章代碼(AID): #1HLK0_T9 (Web_Design)