<html>
<head>
<title>new document </title>
<meta charset="utf-8" />
<style>
#data{
width:800px
border:1px solid #333
border-collapse:collapse
}
#data td,#data th{
border:1px solid #333
text-align:center
}
#data td[colspan="3"]{
text-align:right
}
</style>
<script>
function calc(btn){
//1、向上一级找 td
var td = btn.parentNode
//2、查找第二个子节点
var span = td.children[1]
//3、如果 btn.innerHTML == +
if(btn.innerHTML == "+"){
span.innerHTML = parseInt(span.innerHTML)+1
}else{
if(span.innerHTML == "1"){
span.innerHTML="1"
}else{
span.innerHTML = parseInt(span.innerHTML)-1
}
}
//计算小计
var tds = td.parentNode.getElementsByTagName("td")
//从tds[1]中，取出单价
var price = parseInt(tds[1].innerHTML)
console.log("单价:"+price)
var allPrice = price * parseInt(span.innerHTML)
console.log("小计:"+allPrice)
tds[3].innerHTML=allPrice
//总计
var sum = 0//用于累加 小计的和
var tbody = document.getElementsByTagName("tbody")
//获取tbody下所有的tr
var trs = tbody[0].children
//循环遍历tr数组，获取每一个tr
for(var i=0i<trs.lengthi++){
//获取每一个 tr
var tr = trs[i]
//获取tr里面最后一个元素节点
var td = tr.lastElementChild
sum = sum + parseInt(td.innerHTML)
}
//为 id=sum的td 赋值
document.getElementById("sum").innerHTML=sum
}
</script>
</head>
<body>
<table id="data">
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr>
<td>iphone6</td>
<td>4488</td>
<td>
<button onclick="calc(this)">-</button>
<span>1</span>
<button onclick="calc(this)">+</button>
</td>
<td>4488</td>
</tr>
<tr>
<td>iphone6 plus</td>
<td>5288</td>
<td>
<button onclick="calc(this)">-</button>
<span>1</span>
<button onclick="calc(this)">+</button>
</td>
<td>5288</td>
</tr>
<tr>
<td>iphone6s</td>
<td>5288</td>
<td>
<button onclick="calc(this)">-</button>
<span>1</span>
<button onclick="calc(this)">+</button>
</td>
<td>5288</td>
</tr>
<tr>
<td>iphone6s plus</td>
<td>6088</td>
<td>
<button onclick="calc(this)">-</button>
<span>1</span>
<button onclick="calc(this)">+</button>
</td>
<td>6088</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总计</td>
<td id="sum">0</td>
</tr>
</tfoot>
</table>
</body>
</html>
直接上代码 我用table做的 你看下！！！
// ==UserScript==// @name JD
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match https://item.jd.com/*
// @grant none
// ==/UserScript==
/* jshint -W097 */
'use strict'
// Your code here...
var divObj=document.createElement("input")
divObj.type="button"
divObj.value='获取抓取内容'
divObj.style.marginTop="20px"
divObj.style.marginBottom="20px"
divObj.style.marginLeft="50px"
var first=document.body.firstChild
document.body.insertBefore(divObj,first)
var result={}
divObj.onclick=function(){
//获取价格
if(document.getElementById("jd-price")){
var priceDiv=document.getElementById("jd-price")
var price = priceDiv.innerText
price = price.substr(1)
}else if(document.getElementById("price")){
var pricePri=document.getElementById("price")
var priceDiv=pricePri.firstElementChild
var price = priceDiv.innerText
}else if(document.getElementsByClassName("price")[0]){
var priceClass=document.getElementsByClassName("price")
var priceDiv=priceClass[0]
var price = priceDiv.innerText
}
result.price=price
}
