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(){
	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 ="";	
	}
}

接下来又卡到删除上了,

先说一个遇到的问题,

<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>



Logo

前往低代码交流专区

更多推荐