<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>guestbook demo</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="Author" content="Sheneyan" /> <script type="text/javascript"> var data = [ { id:11, name:'路人甲', mail:'somebodyA@foo.com', title:'測試一下這個留言板好用不', content:'測試就是測試，不要問我為什麼測試，也不要問我為了什麼測試，反正我就是要測試，你能把我怎麼著？', time:'2007-03-21 12:33:43' }, { id:12, name:'路人乙', mail:'somebodyB@foo.com', title:'你好，麻煩你一件事', content:'你好，你能告訴我你的QQ嗎？我有事麻煩你', time:'2007-03-22 22:33:43' }, { id:13, name:'路人丙', mail:'somebodyC@foo.com', title:'啊啊啊', content:'世界如此美好，我脾氣如此暴躁，這樣不好~不好~~', time:'2007-03-23 12:03:41' }, { id:14, name:'路人丁', mail:'somebodyD@foo.com', title:'...', content:'其實。。。我是一個演員', time:'2007-03-23 22:04:08' }, { id:15, name:'xxx', mail:'armyA@foo.com', title:'xxx', content:'長夜漫漫無新睡眠，咦，怎麼先生你也沒睡？', time:'2007-03-24 11:12:55' } ]; function getMutliData(){ var x = p = document.getElementById('post'); for (var i = 0 ; i < data.length ; i ++){ var o = p.cloneNode(true); if (x.nextSibling) x.parentNode.insertBefore(o,x.nextSibling); else x.parentNode.appendChild(o); var t = o.innerHTML; t = t.replace(/<!--{(.*?)}-->/g,function(a,b){ var v = ""; try{ v = eval("data["+i+"]."+b); } catch(e){} return v; }); o.innerHTML = t; x = o; } p.style.display='none'; } </script> </head> <body> <div id="post"> <fieldset> <legend id="post_header">(<!--{id}-->)'><!--{name}-->於<!--{time}-->發表：</legend> <h4 id="post_title"><!--{title}--></h4> <p id="post_content"><!--{content}--></p> </fieldset> </div> <button onclick="getMutliData()">擷取多條資料(類比ajax擷取資料)</button> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
