需求一个js， 点击左边的div 在右边显示相对于内容 并统计
需求一个js，点击左边的div在右边显示相对于内容并统计点击左边方框在右边显示相对应的列表...
需求一个js， 点击左边的div 在右边显示相对于内容 并统计
点击左边方框 在右边显示相对应的列表 展开
点击左边方框 在右边显示相对应的列表 展开
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;
}
</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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
给你写了一个， css随便写的， 具体你根据你的情况修改下即可！
yc.js
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
(function($) {
$.fn.huadong = function( obj, obja, time ) {
this.height($(window).height()).css({'position':'absolute', 'top':'0px', 'left' : '0px'}); //首先把最外层的标签对象设置为浮动， 上边为0， 左边也为0
var left = $(obj).width(); //取得左边栏的宽度
$(obj).height($(window).height()).width(0).hide(); //将左边栏的高度设置为浏览器的高度， 宽度为0， 并隐藏掉！这样是为了页面载入的时候初始化
$(obja).click(function(){ //给触发按钮绑定点击事件，也就是鼠标点击触发按钮后执行的动作
$(obj).show().animate({'width':left + 'px'}, time); //把左边栏的宽度设置为原来的宽度并显示出来， 根据设定的时间慢慢展现
});
$(obj).mouseout(function(){ //绑定左边栏鼠标移开事件
$(this).animate({'width':'0px'}, time, function(){ $(this).hide(); }); //又把左边栏的宽度设置为0， 并且隐藏
});
}
})(jQuery);
yc.js
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
(function($) {
$.fn.huadong = function( obj, obja, time ) {
this.height($(window).height()).css({'position':'absolute', 'top':'0px', 'left' : '0px'}); //首先把最外层的标签对象设置为浮动， 上边为0， 左边也为0
var left = $(obj).width(); //取得左边栏的宽度
$(obj).height($(window).height()).width(0).hide(); //将左边栏的高度设置为浏览器的高度， 宽度为0， 并隐藏掉！这样是为了页面载入的时候初始化
$(obja).click(function(){ //给触发按钮绑定点击事件，也就是鼠标点击触发按钮后执行的动作
$(obj).show().animate({'width':left + 'px'}, time); //把左边栏的宽度设置为原来的宽度并显示出来， 根据设定的时间慢慢展现
});
$(obj).mouseout(function(){ //绑定左边栏鼠标移开事件
$(this).animate({'width':'0px'}, time, function(){ $(this).hide(); }); //又把左边栏的宽度设置为0， 并且隐藏
});
}
})(jQuery);
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
