需求一个js, 点击左边的div 在右边显示相对于内容 并统计(或者更改)_百...
发布网友
发布时间：2024-05-11 11:48
共2个回答
热心网友
时间：2024-06-09 06:17
<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>
热心网友
时间：2024-06-09 06:23
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>
