2018京东笔试编程：完善JavaScript，实现删除一行，增加一行，计算总量。不能改动给出的html。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2018京东笔试编程：完善JavaScript，实现删除一行，增加一行，计算总量。不能改动给出的html。相关的知识，希望对你有一定的参考价值。
已给出的代码：
<style>
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>
<script>
function add() {
}
function bind() {
}
</script>
<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>
我做的并没有ac，因为交了卷才发现window.onload时w一不小心大写了。分享一下，给自己攒点人品。下面是我的解答：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
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;
}
.la{
border-collapse: collapse;
width: 100%;
}
</style>
<script>
var data=[
{name:‘产品4‘,price:10.00,operation:‘‘},
{name:‘产品5‘,price:20.02,operation:‘‘},
{name:‘产品6‘,price:40.10,operation:‘‘},
{name:‘产品7‘,price:30.04,operation:‘‘}
];
function binder(x){
return ‘<tr><td class="name">‘+data[x].name+
‘</td><td class="price">‘+data[x].price+
‘</td><td class="operation"><a href="javascript:void(0);" class="add">‘+data[x].operation+
‘</a></td></tr>‘;
}
var table= document.createElement(‘table‘);
var item=[],i;
for( i=0;i<data.length;i++){
data[i].operation=‘增加‘;
item[i]=binder(i); //利用闭包
}
table.innerHTML=item;
table.id="anotherTable";
function add() {
var addList= document.getElementsByClassName("add");
for(i=0;i<addList.length;i++){
addList[i].onclick=function(){
if(this.parentNode.parentNode.parentNode.parentNode.id!=‘jsTrolley‘) {
this.text = ‘删除‘;
//alert(i+4);拿到整行tr节点：this.parentNode.parentNode
var jsTrolley = document.getElementById(‘jsTrolley‘);
jsTrolley.children[1].insertBefore(this.parentNode.parentNode, jsTrolley.children[1].firstElementChild); //这是增加到最前面，使用这个也可以
//jsTrolley.appendChild(this.parentNode.parentNode); //这是增加到最后面
sum();
}else{
bind();
}
};
}
}
function bind() {
var jsTrolley= document.getElementById(‘jsTrolley‘);
var arrA=document.getElementsByTagName("a");
for(i=0;i<arrA.length;i++){
arrA[i].onclick=function( ){
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
sum();
};
}
}
function sum(){
var sum =0;
var num=0;
var childs=document.getElementsByTagName("tfoot")[0].childNodes.item(0).childNodes;
//alert(childs.length);
var arrA=document.getElementsByTagName("a");
for(i=0;i<arrA.length;i++){
if(arrA[i].parentNode.parentNode.parentNode.parentNode.id==‘jsTrolley‘) {
num++;
var price = arrA[i].parentNode.parentNode.childNodes.item(1).innerHTML;
sum = sum + Number(price);
}
}
sum=Number(sum).toFixed(2);
childs[1].innerHTML=sum+‘(‘+num+‘件商品)‘;
}
window.onload = function () {
bind();
document.body.appendChild(table);
add();//注意顺序，必须先document.body.appendChild(table)，渲染出table来，再执行add函数
sum();
};
</script>
</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>
</body>
</html>
以上是关于2018京东笔试编程：完善JavaScript，实现删除一行，增加一行，计算总量。不能改动给出的html。的主要内容，如果未能解决你的问题，请参考以下文章