此部落格停止維護和更新,已轉移https://github.com/ilvseyinfu/blog
阿新 • • 發佈:2019-01-04
14 + 16 單選+不定項
感覺選擇考的還是比較基礎的,cookie / 本地儲存 / 網路協議 / CSS3新特性 / HTML5新元素 剩下的記不起來了,對了還考了Vue和react
程式設計題2道,第二道沒時間看了,剛開始還覺得時間很充裕,然後就卡到第一道程式設計題上了,第一道題考的就是原JavaScript操作DOM,好在可以用編譯器調bug,不像下午考搜狗,寫CSS樣式,直接在考卷上寫,完全不知道自己寫出來的對不對,也無法調整,言歸正傳,具體說下這道題,很像之前寫過的購物車頁面,動態的增加刪除,動態渲染頁面,比如數量和總價,只是這道題不能用框架。建立和刪除一個節點,這個好說,主要是卡在如何遍歷一個table
1 . 首先通過題目給的table id 獲得該物件
2. tableObj.rows.length; 獲得行數
3. tableObj.rows[x].cells[y].innerText 可以獲得x行y列的值
4.遍歷table
function show(){ vartableRowInfo =""; tableObj = document.getElementById("jsTrolley"); for(var i =0 ;i<tableObj.rows.length ; i++){ for(var j=0 ;j<tableObj.rows[i].cells.length ; j++){ tableRowInfo += tableObj.rows[i].cells[j].innerText + " "; } console.log(tableRowInfo); // 列印每行資訊 tableRowInfo =""; } }
接下來又卡到刪除上了,
先說一個遇到的問題,
<body> <a id='a1' href="javascript:void(0);">測試用1</a> <script type="text/javascript"> function t(){ var c= document.getElementById("a1"); var b = 10; c.setAttribute("onclick","javascript:alert(b)"); // 注意 ! 此處有坑! 此時無法獲取b,要將b宣告成全域性變數後才可以訪問! } t(); </script> </body>
就是卡到這裡,每次給連結設定onclick 屬性:javascript:src.removeChild(tar),scr 和tar 都會報undefined,將他們改成全域性變數就可以正常訪問了。
接下來的就是小問題了,每次新增商品/刪除商品後,記得重新渲染下總計(包括商品數量和總價),還有就是用js操作dom如何獲得祖先元素/父元素/同胞元素也需要好好再掌握下了,不經常寫就是記不住。
最後,說下感受,剛考完還感覺十分可惜,感覺可以做出來時間就差一點,其實晚上靜靜的想想,把程式碼寫完,發現要處理的細節還是蠻多的,每一個小點都能反應出對知識的掌握程度,總體來說還是很弱,不過還是想鼓勵下自己,最近苦練JavaScript還是小有成效。
把完整程式碼貼上,有興趣的可以直接黏貼拷貝檢視效果
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body,html{
padding: 0;
margin: 0;
font-size: 14px;
color: #000000;
}
table{
border-collapse: collapse;
width: 100%;
table-layout: fixed;
}
thead{
background: #3d444c;
color: #ffffff;
}
td,th{
border: 1px solid #e1e1e1;
padding: 0;
height: 30px;
line-height: 30px;
text-align: center;
}
</style>
</head>
<body>
<table id="jsTrolley">
<thead><tr><th>名稱</th><th>價格</th><th>操作</th></tr></thead>
<tbody>
<tr><td>產品1</td><td>10.00</td><td><a href="javascript:void(0);">刪除</a></td></tr>
<tr><td>產品2</td><td>30.20</td><td><a href="javascript:void(0);">刪除</a></td></tr>
<tr><td>產品3</td><td>20.50</td><td><a href="javascript:void(0);">刪除</a></td></tr>
</tbody>
<tfoot><tr><th>總計</th><td colspan="2">60.70(3件商品)</td></tr></tfoot>
</table>
<script type="text/javascript">
function add(items) {
sum = 60.70;
for(var i =0 ;i<items.length ;i++){
var add = document.createElement("tr");
var src = document.getElementsByTagName("tbody");
add.innerHTML = "<td>"+items[i].name+"</td><td>"+items[i].price+"</td><td><a href='javascript:void(0);'>刪除</a></td>";
src[0].appendChild(add);
sum +=items[i].price;
}
//var num = 3 +items.length;
var tableObj = document.getElementById("jsTrolley");
var num = tableObj.rows.length -2;
tableObj.rows[4+items.length].cells[1].innerText =sum.toFixed(2)+"("+num+"件商品)";
}
function bind() {
var arr = document.getElementsByTagName("a");
var src = document.getElementsByTagName("tbody");
s = src[0];
var len = arr.length;
for(var i =0 ;i<len ;i++)
{
arr[i].setAttribute("onclick","foo(s,this)");
}
}
function foo(x,y){
var tar = y.parentNode.parentNode;
x.removeChild(tar);
var v = y.parentNode.previousSibling.innerHTML;
sum -=v;
//console.log(sum);
var tableObj = document.getElementById("jsTrolley");
var num = tableObj.rows.length -2;
//console.log(sum2.toFixed(2)+"---"+num2);
tableObj.rows[tableObj.rows.length-1].cells[1].innerText = sum.toFixed(2)+"("+num+"件商品)";
}
var items = [{name:'ilv',price:10.0},{name:'ilv2',price:10.0}];
add(items);
bind();
function show(){
var tableRowInfo ="";
tableObj = document.getElementById("jsTrolley");
for(var i =0 ;i<tableObj.rows.length ; i++){
for(var j=0 ;j<tableObj.rows[i].cells.length ; j++){
tableRowInfo += tableObj.rows[i].cells[j].innerText + " ";
}
console.log(tableRowInfo); // 列印每行資訊
tableRowInfo ="";
}
}
show();
</script>
</body>
</html>