html+jsp+網頁股票頁面製作
阿新 • • 發佈：2018-12-16
後臺操作頁面的html程式碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/function.js"> </script> </head> <body> <table border="2" cellspacing="0"cellpadding="14" width="1200" contenteditable="false" id="table"> <tr> <th><abbr title="全選" id="abbr"> <input type="checkbox" name="" id="" value="" onclick="selectAllCheckbox(this)"/></abbr></th> <th>提醒</th> <th>程式碼</th> <th>名稱</th> <th>相關連結</th> <th>最低價</th> <th>跌漲幅</th> <th>漲跌額</th> <th>總手</th> <th>觀手</th> <th>買入價</th> <th>賣出價</th> <th>換手</th> <th>金額</th> <th>筆記</th> <th>刪除</th> </tr> <tr> <script type="text/javascript"> dataGenerator(); </script> </tr> </table> <div id=""> <input type="button" name="delete" id="" value="刪除" onclick="deletes()"/> <input type="button" name="" id="" value="修改" onclick="modify()"/> <input type="button" name="" id="" value="增加" onclick="add()"/> </div> </body> </html>
jsp程式碼
function dataGenerator(){ for(var b=0;b<8;b++){ document.write("<tr class='stocktable4'></tr>") document.write("<td><input type='checkbox' name='checkbox'></td>") for (var a=0;a<15;a++) { document.write("<td>Data</td>"); } } } function selectAllCheckbox(elements){ var ifChecked=elements.checked; var allbox=document.getElementsByName("checkbox"); var span=document.getElementById("abbr"); for(var a=0;a<allbox.length;a++){ if(ifChecked==true){ allbox[a].checked=true; span.title="取消全選"; } else{ allbox[a].checked=false; span.title="全選"; } } } function deletes(){ var s=document.getElementsByName("checkbox"); var a=document.getElementById("table"); for(var b=0;b<s.length;b++){ if(s[b].checked){ s[b].parentNode.parentNode.remove(); } } } function add(){ var trs = document.getElementById("table"); var tr=document.createElement("tr"); trs.appendChild(tr); var td=document.createElement("td"); td.innerHTML="<input type='checkbox' name='checkbox' />"; trs.appendChild(td); for(var i=0;i<15;i++){ var td=document.createElement("td"); td.innerHTML="Data"; trs.appendChild(td); } } function modify(){ var room=document.getElementById("table"); room.contentEditable=true; }
1.頁面通過jsp程式碼for迴圈，利用document.write("")生成table的資料 2.頁面的複選框按鈕選中一個全部選中 通過getElementsByName(“checkbox”)獲得母複選框，判斷是否被選中，對子複選框進行操作 3.新增abbr標籤，數遍停留在複選框，出現資訊，通過函式操作實現選中和未選中資訊不同 4.新增按鈕的方法即通過input type=“button” name=“delete” id="" value=“刪除” onclick=“deletes()”/>獲得 其中onclick呼叫的是delete函式 5.實現增添一行table，var table=getElementsById(“table”),得到table,然後創造var element=document.createElement(),並用table.append(element)新增到table裡,最後向element內內中資料element.innerHTML();
function add(){
var trs = document.getElementById("table");
var tr=document.createElement("tr");
trs.appendChild(tr);
var td=document.createElement("td");
td.innerHTML="<input type='checkbox' name='checkbox' />";
trs.appendChild(td);
for(var i=0;i<15;i++){
var td=document.createElement("td");
td.innerHTML="Data";
trs.appendChild(td);
}
}
6.刪除通過得到相應的element元素，用remove函式刪除。
function deletes(){
var s=document.getElementsByName("checkbox");
var a=document.getElementById("table");
for(var b=0;b<s.length;b++){
if(s[b].checked){
s[b].parentNode.parentNode.remove();
}
}
}