作者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