練習由JavaScript塞資料到table
<!DOCTYPE HTML> <html> <head> <title>Example:insert data into Table by javascript</title> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body><style> thead{background:#999} th,td{border:1px solid #999;padding:2px} </style><h1>Example:Insert data into Table by Javascript</h1> <table> <thead><th>ID</th><th>Author</th><th>Cat</th><th>title</th><th>Has_image</th><th>Date</th></thead> <tbody><!--Insert data by Javascript這裡要用下面的js塞資料--></tbody> <tfoot></tfoot> </table> <footer> <script>/* *Subject:Insert data into Table by Javascript *Date : 2012-12-28 *Author : Win */$(function(){/* 簡單的資料結構 *id | String *author | String *cat | String *title | String *has_img | String 0=>no images 1=>has *date | String */vartbody_cnt_ary = [/*fake data*/ /*tbody_cnt_ary means the content for tbody*/{id:"1",author:"WinWu",cat:"Life",title:"Happy New Year!",has_img:"0",date:'03:47:22'}, {id:"2",author:"TestWu",cat:"Life",title:"How to Clean Your..?",has_img:"0",date:'03:47:22'}, {id:"3",author:"FriWu",cat:"Career",title:"Hust Try to Jump to...",has_img:"0",date:'03:47:22'}, {id:"4",author:"Yi Wu",cat:"Life",title:"Is your work...",has_img:"1",date:'03:47:22'}, {id:"5",author:"YingWu",cat:"News",title:"Sometimes we...",has_img:"1",date:'03:47:22'}, {id:"6",author:"Anny",cat:"Career",title:"Frontend is only?...",has_img:"0",date:'03:47:22'}, {id:"7",author:"Irene",cat:"Skill",title:"Why server-side ?...",has_img:"1",date:'03:47:22'}, ];varnum = tbody_cnt_ary.length;if(num>0) { for(i=0; i<num; i++){ $('table'/*select the element*/).find('tbody').append( '<tr class="y1"><td class="x1">'+tbody_cnt_ary[i].id+ '</td><td class="x2">'+tbody_cnt_ary[i].author+ '</td><td class="x3">'+tbody_cnt_ary[i].cat+ '</td><td class="x4">'+tbody_cnt_ary[i].title+ '</td><td class="x5">'+tbody_cnt_ary[i].has_img+ '</td><td class="x6">'+tbody_cnt_ary[i].date+ '</td></tr>'); }; } }); </script> </footer> </body> </html>
沒有留言:
張貼留言
若你看的文章，時間太久遠的問題就別問了，因為我應該也忘了... XD