& lthtml & gt
& lthead & gt
& ltmeta？charset =“UTF-8“& gt；
& lttitle & gt插入？標題？這裏& lt/title & gt；
& lt/head & gt；
& lt風格？type =“text/CSS“& gt；
。集裝箱？{
寬度:？99.6%;
身高:？99%;
位置:？絕對；
top:？0.5%;
左:？0.2%;
溢出:？auto
邊框:？1px？開始嗎？# d0efe5
邊框半徑:？5px
-moz-border-radius:？5px
-wekit-border-radius:？5px
背景:？# F5F5F5
-WebKit-背景-大小:？封面；
-moz-背景-大小:？封面；
-o-背景-大小:？封面；
背景大小:？封面；
}
。桌子？{
寬度:？600px
邊框:？固體？# add9c0
邊框寬度:？1px？0px？0px？1px；
}
。桌子？th？td？{
行高:？30px
邊框:？固體？# add9c0
邊框寬度:？0px？1px？1px？0px
}
。桌子？tr？{
寬度:？100%;
邊距:？0?auto
邊框:？無；
溢出:？隱藏；
顏色:？# 2981e 4；
字體:？正常？12px/100%？“微軟雅黑”？“露希達？格蘭德”，？“露希達？Sans“，？Helvetica？Arial？Sans
}
。中心？{
文本對齊:？居中；
}
。桌子？輸入【type =‘text‘】？{
寬度:？120 px；
顏色:？#333;
填充:？4px？5px
邊框:？1px？固體？# e0ecff
邊框半徑:？2px
-o-border-半徑:？2px
-moz-border-radius:？2px
-wekit-border-radius:？2px
方框陰影:？0?0?0?2px？rgba（255255，？255,?0.2);
-o-box-陰影:？0?0?0?2px？rgba（255255，？255,?0.2);
-WebKit-盒子-陰影:？0?0?0?2px？rgba（255255，？255,?0.2);
-moz-box-影子:？0?0?0?2px？rgba（255255，？255,?0.2);
行為:？URL（/pie . HTC）；
}
。桌子？input【type =‘text‘】:focus，。桌子？輸入【type =‘text‘】:懸停？{
邊框:？1px？固體？# 3aa2d0
大綱:？無；
}
& lt/style & gt；
& ltbody & gt
& ltdiv？class =“container“& gt。
& lt桌子？class=“表？中心“？id =“my table“& gt；
& lttr & gt
& ltth & gt接受的會話（會話）。
& ltth & gt接受人數（人）
& lt/tr & gt；
& lt/table & gt；
& lt/div & gt；
& lt劇本？type =“text/JavaScript“& gt；
//數據庫中查詢到的數據
功能？查詢（）{
var？數據？=?[];
for（var？idx？=?0;idx？& lt？10;？idx？++){
datas . push （{
cc？:?（idx？%?3)?+?5,
rc？:?（idx？%?3)?*?五
});
}
回歸？數據；
}
//加載數據（加載時計算總數，輸入時計算總數）
功能？加載（數據）{
如果（數據）{
var？我的桌子？=?document . getelementbyid（“my table“）；
//添加數據行
var？排嗎？=?"";
var？tcc？=?0,?trc？=?0;
for（var？idx？=0;？idx？& lt？datas.length？idx？++){
var？數據？=?datas【idx】；
var？cc=？parse int（data . cc？||?"0");
var？rc？= parse int（data . RC？||?"0");
tcc？=?tcc？+?cc；
trc？=?trc？+?RC；
排嗎？=?排嗎？+?“& lttr & gt& lttd & gt& lt輸入？type =‘text‘？name =‘cc‘？value=“？+?cc？+?"?onkeyup =‘total（this）‘& gt；& lt/TD & gt；& lttd & gt& lt輸入？type =‘text‘？name =‘RC‘？value=“？+?rc？+?“onkeyup =‘total（this）‘& gt；& lt/TD & gt；& lt/tr & gt；”；
}
myTable.innerHTML？=?myTable.innerHTML？+?行數；
//添加匯總行
var？totalRows？=?“& lttr & gt& lttd？id =‘TCC‘& gt；”？+?tcc？+?“& lt/TD & gt；& lttd？id =‘TRC‘& gt；”？+?trc？+?“& lt/TD & gt；& lt/tr & gt；”；
myTable.innerHTML？=?myTable.innerHTML？+?totalRows
}
}
//總和
功能？總計（目標）
//計算值
var？名字？=?obj.name
var？電視？=?0;
var？投入？=?document . getelementsbyname（name）；
for（var？idx？=?0;？idx？& lt？輸入。長度；？idx？++){
var？ipt？=?輸入【idx】；
電視？=?電視？+?parse int（ipt . value？||?"0");//這裏不處理輸入字符的問題。限制在輸入框中輸入數字。
}
//設置值
var？tid？=?“t”？+?姓名；
var？tobj？=?document . getelementbyid（tid）；
tobj.innerText？=?電視；
}
window.onload？=?函數（）？{
var？數據？=?query（）；
負載（數據）；
};
& lt/script & gt；
& lt/body & gt；
& lt/html & gt；如果使用JQuery，代碼會少很多，壹般的實現原理都在裏面，可以根據自己的需求進行修改；