需求一个js， 点击左边的div 在右边显示相对于内容 并统计（或者更改）
需求一个js，点击左边的div在右边显示相对于内容并统计点击左边方框在右边显示相对应的列表合计包括数量总数小计总数的和点击清空这清空表格的数据。根据下面代码更改也行，非常...
需求一个js， 点击左边的div 在右边显示相对于内容 并统计
点击左边方框 在右边显示相对应的列表
合计包括 数量总数 小计总数 的和
点击清空 这清空表格的数据。
根据下面代码更改也行，非常感谢！！！！
http://zhidao.baidu.com/question/1862557182078395067.html 展开
点击左边方框 在右边显示相对应的列表
合计包括 数量总数 小计总数 的和
点击清空 这清空表格的数据。
根据下面代码更改也行，非常感谢！！！！
http://zhidao.baidu.com/question/1862557182078395067.html 展开
2个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS 演示代码</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
margin: auto;
width: 800px;
font: bolder 16px 'Comic Sans MS' '新宋体';
}
.wrap [name=sp] {
border: 1px solid black;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
margin: 10px;
}
.wrap [name=sp]:hover {
background-color: #fd3;
cursor: pointer;
}
.wrap .shu {
width: 0px;
height: 311px;
border: 1px solid black;
margin: -121px auto auto 231px;
}
.wrap table {
margin: -311px auto auto 291px;
border: 1px solid black;
border-collapse: collapse;
width: 300px;
}
.wrap table th {
background-color: gray;
color: white;
}
.wrap table th, td {
border: 1px solid black;
text-align: center;
}
.wrap a {
text-decoration: none;
color: #fd3;
}
</style>
<script>
var info = [
["商品1", , 50],
["商品2", , 100]
];
onload = function() {
var tbody = table.tBodies[0];
var sps = document.getElementsByName("sp");
var fun = function(i) {
sps[i].onclick = function() {
for (var k = 0; k < tbody.rows.length; k++) {
var r = tbody.rows[k];
var tds = r.cells;
for (var j = 0; j < tds.length; j++) {
if (tds[j].innerHTML.indexOf(info[i][0]) != -1) {
tbody.deleteRow(r.rowIndex);
break;
}
}
}
var tr = tbody.insertRow(tbody.rows.length - 1);
var io = info[i];
for (var j = 0; j < 5; j++) {
var td = tr.insertCell(tr.cells.length);
if (j == 1) { // 数量
!io[j] ? io[j] = 1 : io[j]++;
} else if (j == 3) { // 小计
!io[j] ? io[j] = io[2] : sum += (io[j] += io[2]);
}
if (j < 4) {
td.innerHTML = io[j];
} else {
td.innerHTML = "<a href='###' onclick='del(this)'>删除</a>";
}
}
var sum = 0; // 总计
for (var k = 0; k < info.length; k++) {
var ik = info[k][3];
if (ik) sum += ik;
}
heji.innerHTML = sum;
sum = 0; //数量总计
for (var k = 0; k < info.length; k++) {
var ik = info[k][1];
if (ik) sum += ik;
}
zj.innerHTML = sum;
}
}
for (var i = 0; i < sps.length; i++) {
fun(i);
}
document.onselectstart = new Function("return false");
}
var del = function(a) {
var tr = a.parentElement.parentElement;
var tbody = tr.parentElement;
tbody.deleteRow(tr.rowIndex);
var sum = 0,
total = 0;
var rows = tbody.rows;
for (var i = 1; i < rows.length - 1; i++) {
var num = rows[i].cells[3].innerHTML;
sum += num * 1;
num = rows[i].cells[1].innerHTML;
total += num * 1;
}
heji.innerHTML = sum;
zj.innerHTML = total;
}
var clearx = function(a) {
var tr = a.parentElement.parentElement;
var tbody = tr.parentElement;
for (var i = 1; i < tbody.rows.length - 1; i++) {
tbody.deleteRow(i);
i--;
}
heji.innerHTML = zj.innerHTML = 0;
}
</script>
</head>
<body>
<div class="wrap">
<div name="sp">商品1 ￥50</div>
<div name="sp">商品2 ￥100</div>
<div class="shu"></div>
<table id="table">
<tr>
<th>名称</th>
<th>数量</th>
<th>价格</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr>
<td>合计：</td>
<td id="zj">0</td>
<td colspan=2 id="heji">0</td>
<td> <a href="###" onclick="clearx(this)">清空</a>
</td>
</tr>
</table>
</div>
</body>
</html>
追问
如果要每点击一次删除 则 对应 产品的 数量 减一 ， 减到0时 整行才删除 应该怎么改？
追答
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
RunJS 演示代码
</title>
<style>
*{
margin:0;
padding:0;
}
.wrap{
margin:auto;
width:800px;
font: bolder 16px 'Comic Sans MS' '新宋体';
}
.wrap [name=sp]{
border: 1px solid black;
width: 200px;
height: 50px;
text-align:center;
line-height:50px;
margin:10px;
}
.wrap [name=sp]:hover{
background-color:#fd3;
cursor:pointer;
}
.wrap .shu{
width:0px;
height: 311px;
border: 1px solid black;
margin: -121px auto auto 231px;
}
.wrap table {
margin: -311px auto auto 291px;
border:1px solid black;
border-collapse:collapse;
width: 300px;
}
.wrap table th {
background-color: gray;
color:white;
}
.wrap table th, td{
border:1px solid black;
text-align:center;
}
</style>
<script>
var info = [["商品1",50],["商品2",100]];
onload = function(){
var tbody = table.tBodies[0];
var sps = document.getElementsByName("sp");
var fun = function(i){
sps[i].onclick = function () {
for(var k = 0; k < tbody.rows.length; k++){
var r = tbody.rows[k];
var tds = r.cells;
for(var j = 0; j <tds.length;j++){
if(tds[j].innerHTML.indexOf(info[i][0])!=-1){
tbody.deleteRow(r.rowIndex);
break;
}
}
}
var tr = tbody.insertRow(tbody.rows.length - 1);
var io = info[i];
for(var j = 0; j < 4; j++){
var td = tr.insertCell(tr.cells.length);
if(j==2){
!io[j] ? io[j] = 1 : io[j]++;
}else if(j==3){
!io[j] ? io[j] = io[1] : sum+=(io[j]+=io[1]);
}
td.innerHTML = io[j];
}
var sum=0;
for(var k=0;k<info.length;k++){
var ik =info[k][3];
if(ik) sum+=ik;
}
heji.innerHTML = sum;
}
}
for(var i = 0; i < sps.length; i++) {
fun(i);
}
document.onselectstart = new Function("return false");
}
</script>
</head>
<body>
<div class="wrap">
<div name="sp">
商品1 ￥50
</div>
<div name="sp">
商品2 ￥100
</div>
<div class="shu">
</div>
<table id="table">
<tr>
<th>
名称
</th>
<th>
价格
</th>
<th>
数量
</th>
<th>
小计
</th>
</tr>
<tr>
<td>
合计：
</td>
<td colspan=3 id="heji">
</td>
</tr>
</table>
</div>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
RunJS 演示代码
</title>
<style>
*{
margin:0;
padding:0;
}
.wrap{
margin:auto;
width:800px;
font: bolder 16px 'Comic Sans MS' '新宋体';
}
.wrap [name=sp]{
border: 1px solid black;
width: 200px;
height: 50px;
text-align:center;
line-height:50px;
margin:10px;
}
.wrap [name=sp]:hover{
background-color:#fd3;
cursor:pointer;
}
.wrap .shu{
width:0px;
height: 311px;
border: 1px solid black;
margin: -121px auto auto 231px;
}
.wrap table {
margin: -311px auto auto 291px;
border:1px solid black;
border-collapse:collapse;
width: 300px;
}
.wrap table th {
background-color: gray;
color:white;
}
.wrap table th, td{
border:1px solid black;
text-align:center;
}
</style>
<script>
var info = [["商品1",50],["商品2",100]];
onload = function(){
var tbody = table.tBodies[0];
var sps = document.getElementsByName("sp");
var fun = function(i){
sps[i].onclick = function () {
for(var k = 0; k < tbody.rows.length; k++){
var r = tbody.rows[k];
var tds = r.cells;
for(var j = 0; j <tds.length;j++){
if(tds[j].innerHTML.indexOf(info[i][0])!=-1){
tbody.deleteRow(r.rowIndex);
break;
}
}
}
var tr = tbody.insertRow(tbody.rows.length - 1);
var io = info[i];
for(var j = 0; j < 4; j++){
var td = tr.insertCell(tr.cells.length);
if(j==2){
!io[j] ? io[j] = 1 : io[j]++;
}else if(j==3){
!io[j] ? io[j] = io[1] : sum+=(io[j]+=io[1]);
}
td.innerHTML = io[j];
}
var sum=0;
for(var k=0;k<info.length;k++){
var ik =info[k][3];
if(ik) sum+=ik;
}
heji.innerHTML = sum;
}
}
for(var i = 0; i < sps.length; i++) {
fun(i);
}
document.onselectstart = new Function("return false");
}
</script>
</head>
<body>
<div class="wrap">
<div name="sp">
商品1 ￥50
</div>
<div name="sp">
商品2 ￥100
</div>
<div class="shu">
</div>
<table id="table">
<tr>
<th>
名称
</th>
<th>
价格
</th>
<th>
数量
</th>
<th>
小计
</th>
</tr>
<tr>
<td>
合计：
</td>
<td colspan=3 id="heji">
</td>
</tr>
</table>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
