此部落格停止維護和更新，已轉移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>