好程式設計師web前端教程分享前端 javascript 練習題二
好程式設計師web前端
教程
分享
前端 javascript 練習題
二
,
建立表格,新增刪除操作
介紹:這是用基本的方式,更便捷的方法是,使用es6提供的模板字串,程式碼和效率能提高很多
簡單的樣式:
a < input type =" text "/>
b < input type =" text "/>
c < input type =" text "/>< input type =" button " value =" 新增 "/>< table ></ table >
js實現程式碼:
var oinput = document . getElementsByTagName ( "input" ); var otable = document . getElementsByTagName ( "table" )[ 0 ];
oinput [ oinput . length - 1 ]. onclick = function (){
var otr = document . createElement ( "tr" );
//建立單元格,並且將文字的值加到單元格里
for ( var i = 0 ; i < oinput . length - 1 ; i ++ ){
var otd = document . createElement ( "td" );
otd . innerHTML = oinput [ i ]. value ;
otr . appendChild ( otd );
}
//新增刪除按鈕,並加入到單元格中
var otd = document . createElement ( "td" );
var oSpan = document . createElement ( "span" );
oSpan . innerHTML = "刪除" ;
otd . appendChild ( oSpan );
otr . appendChild ( otd );
oSpan . onclick = function (){
//oTable.removeChild(oTr);
otable . removeChild ( this . parentNode . parentNode );
}
otable . appendChild ( otr );}
進度條
html排版樣式:
< div class =" progressBar ">
< p style =""></ p ></ div >< div class =" progressBar ">
< p ></ p ></ div >< div class =" progressBar ">
< p ></ p ></ div >
js執行程式碼:
var opp = document . getElementsByTagName ( "p" ); function progress (obj,num){
var count = 0 ;
var timer = setInterval ( function (){
count ++ ;
obj . style . width = count + "%" ;
if ( count == num ){
clearInterval ( timer );
}
}, 20 )} progress ( opp [ 0 ], 50 ); progress ( opp [ 1 ], 60 ); progress ( opp [ 2 ], 80 );
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69913892/viewspace-2659561/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 好程式設計師web前端教程分享前端javascript練習題二程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享前端javascript練習題三程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享javascript 練習題程式設計師Web前端JavaScript
- 好程式設計師web前端分享前端 javascript 練習題程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享前端javascript練習題之promise程式設計師Web前端JavaScriptPromise
- 好程式設計師web前端分享前端javascript練習題三程式設計師Web前端JavaScript
- 好程式設計師web前端分享前端javascript練習題一程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享前端javascript練習題Ajax封裝程式設計師Web前端JavaScript封裝
- 好程式設計師web前端教程分享前端javascript練習題之閉包案例程式設計師Web前端JavaScript
- 好程式設計師web前端教程分javascript練習題-事件程式設計師Web前端JavaScript事件
- 好程式設計師web前端教程分享JavaScript面試題程式設計師Web前端JavaScript面試題
- 好程式設計師web前端教程分享JavaScript學習筆記之Event事件二程式設計師Web前端JavaScript筆記事件
- 好程式設計師web前端教程分享JavaScript簡寫方法程式設計師Web前端JavaScript
- 好程式設計師Web前端教程分享JavaScript開發技巧程式設計師Web前端JavaScript
- 好程式設計師web前端培訓分享學習JavaScript程式設計師Web前端JavaScript
- 好程式設計師Web前端教程分享Vue學習心得程式設計師Web前端Vue
- 好程式設計師web前端教程分享JavaScript Math(算數)物件程式設計師Web前端JavaScript物件
- 好程式設計師web前端教程分享web前端基礎知識程式設計師Web前端
- 好程式設計師web前端教程分享CSS技巧!程式設計師Web前端CSS
- 好程式設計師web前端培訓分享JavaScript學習指南程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享Vue.js面試題程式設計師Web前端Vue.js面試題
- 好程式設計師web前端教程分享Jquery常見面試題程式設計師Web前端jQuery面試題
- 好程式設計師web前端教程分享三大前端框架相關問題程式設計師Web前端框架
- 好程式設計師web前端教程分享JavaScript的執行機制!程式設計師Web前端JavaScript
- 好程式設計師Web前端分享前端CSS篇程式設計師Web前端CSS
- 好程式設計師web前端教程分享js中的模組化二程式設計師Web前端JS
- 好程式設計師web前端教程分享js閉包程式設計師Web前端JS
- 好程式設計師web前端教程分享js模板模式程式設計師Web前端JS模式
- 好程式設計師web前端學習路線分享前端基礎面試題程式設計師Web前端面試題
- 好程式設計師web前端教程JavaScript系列之HTTP程式設計師Web前端JavaScriptHTTP
- 好程式設計師web前端教程分享web前端入門基礎知識程式設計師Web前端
- 好程式設計師web前端教程分享js reduce方法使用教程程式設計師Web前端JS
- 好程式設計師web前端教程:字串程式設計師Web前端字串
- 好程式設計師web前端分享常見面試題程式設計師Web前端面試題
- 好程式設計師web前端培訓分享JavaScript框架J程式設計師Web前端JavaScript框架
- 好程式設計師web前端培訓分享JavaScript學習筆記Promise程式設計師Web前端JavaScript筆記Promise
- 好程式設計師web前端培訓分享JavaScript學習筆記SASS程式設計師Web前端JavaScript筆記
- 好程式設計師web前端培訓分享JavaScript學習筆記cookie程式設計師Web前端JavaScript筆記Cookie