http://p13.freep.cn/p.aspx?u=v20_p13_photo_1204061857565537_0.jpg希望点击操作,下面的总金额、话费和座机费有变化,不像现在程序里面写的。
解决方案 »
- 关于mootools的Class中的reset函数的困惑
- 有没有插件实现这种功能
- 求一种可控制上下滚动JS
- 关于ext grid checkbox 50分
- 大家看看,我在文件中加入这个移动图片的代码后,网页的文字就不能选中了.我想可选怎么办.
- js取得绝对路径
- js文件中怎么调用asp的变量呀?
- 如何检测文本框是是合法的数值,数值可包括小数点。
- 【紧急】正则表达式问题,多谢多谢!
- 我用的是2000SERVER+IIS,ASP页面有点问题,请高手指教
- jquery 神一样的插件制作 10几种常用网页特效 只有4.5K大小
- 请教下高手 在GooGle Map 上实现每个省根据销售业绩 显示不同颜色 !这个能实现吗??
我只写了一计算列,你看明白了,稍微改一点,就能扩展到多列
为了简洁,我用了jquery<script type="text/javascript" src="js/jquery-1.6.4.min.js" ></script>
<table id="table1">
<tr>
<th>总金额</th><th>操作<input type="checkbox" id="ckall" /></th>
</tr>
<tr><td class="money1" >15.9</td><td><input type="checkbox" class="ck" /></td></tr>
<tr><td class="money1" >20.8</td><td><input type="checkbox" class="ck" /></td></tr>
<tr><td class="money1" >12.6</td><td><input type="checkbox" class="ck" /></td></tr>
</table>
<div>总金额<span id="money1"></span></div>
<script type="text/javascript" >
$(".ck").change(function() {
addmoney();
}); function addmoney() {
var money1 = 0;
$(".ck").each(function() {
if ($(this)[0].checked) {
money1 += +parseFloat($(this).parent().parent().find(".money1").html());
}
});
$("#money1").html(money1.toFixed(2));
}
$("#ckall").change(function() {
$(".ck").prop("checked", $(this)[0].checked);
addmoney();
});
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
*{font-size:10pt}
.tabl {
width:600px; height:200px; text-align:center; background:orange;
border-top:20px solid orange; border-left:20px solid orange;border-right:20px solid orange
}
.show {
width:590px;height:30px;text-align:center;background:orange;border:5px solid orange;line-height: 30px
}
</style>
<script type="text/javascript" src="http://www.bbvdd.com/d/20120407192900b6rql.txt" ></script>
<script type="text/javascript" >
$(function() {
/*
Import $.addMethod.delegate
Import $.relPackage.domNode domOption
*/
$("\
部门名称, 用户名, 号 码, 国 内, 区 内, 区 间, 座机费, 总金额, 话费年月, 操 作|\
105室, 初始用户, 2461287, 0, 0.44, 0.9, 0, 1.34, 2011-11, <input type='checkbox'>|\
105室, 初始用户, 2461288, 9, 0, 0, 0, 9, 2011-12, <input type='checkbox'>|\
105室, 初始用户, 2461289, 3, 1.54, 0.9, 0, 5.44, 2012-01, <input type='checkbox'>|\
105室, 初始用户, 2461287, 1.8, 0.22, 0, 0, 2.02, 2012-02, <input type='checkbox'>\
").create("table").attr({className:"tabl", border:"1", id:"Tab"}).end()
.create("div").attr("className", "show")
.html("\
总金额:<span id='Z'>0</span>元 | \
话 费:<span id='X'>0</span>元 | \
座机费:<span id='Y'>0</span>元 | \
全 选:<input type='checkbox'> \
<input type='button' value='缴 费'>\
").back()
.delegate("#input", "click", function(o) {
var obj = $(o).parent().parent().child();
typeof this["tel"] != "undefined" || (this["tel"] = "");
var x = Number($("X").html()), y = Number($("Y").html());
if (o.checked) {
this["tel"] += obj.eq(2).html() +"|";
x += Number(obj.back().eq(3).html());
x += Number(obj.back().eq(4).html());
x += Number(obj.back().eq(5).html());
y += Number(obj.back().eq(6).html());
} else {
var reg = new RegExp(obj.eq(2).html());
this["tel"] = this["tel"].replace(reg, "");
x -= Number(obj.back().eq(3).html());
x -= Number(obj.back().eq(4).html());
x -= Number(obj.back().eq(5).html());
y -= Number(obj.back().eq(6).html());
}
$("X").html(x), $("Y").html(y), $("Z").html(x + y);
}).back()
.child()
.each(function() {
/^checkbox$/i.test(this.type) && $(this).attr("onclick", function() {
typeof $("Tab").attr("tel") != "undefined" || $("Tab").attr("tel", "");
if (this.checked) {
var x = 0, y = 0, s = "";
$("Tab").html().replace(/\d{7}[\S\s]*?\d{4}-/g, function($) {
var arr = $.match(/[^>]+(?=<\/)/g);
x += Number(arr[1]) + Number(arr[2]) + Number(arr[3]);
y += Number(arr[4]);
s += arr[0] + "|";
});
$("Tab").attr("tel", s);
$("Tab^input").checked(true);
$("X").html(x), $("Y").html(y), $("Z").html(x + y);
} else {
$("Tab").attr("tel", "");
$("Tab^input").checked(false);
$("X").html(0), $("Y").html(0), $("Z").html(0);
}
});
/^button$/i.test(this.type) && $(this).attr("onclick", function() {
var url = "serverPath" + "?tel=" + [$("Tab").attr("tel") || ""];
url += "&hf=" + $("X").html() + "&zj" + $("Y").html() + "&ze=" + $("Z").html();
url = encodeURI(url);
alert("请求API:" + url);
})
})
})
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
*{font-size:10pt}
.tabl {
width:600px; height:200px; text-align:center; background:orange;
border-top:20px solid orange; border-left:20px solid orange;border-right:20px solid orange
}
.show {
width:590px;height:30px;text-align:center;background:orange;border:5px solid orange;line-height: 30px
}
</style>
<script type="text/javascript" src="http://www.bbvdd.com/d/20120408182249y3srz.txt"></script>
<script type="text/javascript" >
$(function() {
/*
Import $.addMethod.delegate
Import $.relPackage.*
*/
$("\
部门名称, 用户名, 号 码, 国 内, 区 内, 区 间, 座机费, 总金额, 话费年月, 操 作|\
105室, 初始用户, 2461287, 0, 0.44, 0.9, 0, 1.34, 2011-11, <input type='checkbox'>|\
105室, 初始用户, 2461288, 9, 0, 0, 0, 9, 2011-12, <input type='checkbox'>|\
105室, 初始用户, 2461289, 3, 1.54, 0.9, 0, 5.44, 2012-01, <input type='checkbox'>|\
105室, 初始用户, 2461287, 1.8, 0.22, 0, 0, 2.02, 2012-02, <input type='checkbox'>\
").create("table").attr({className:"tabl", border:"1", id:"Tab"}) //以上字符串可由后台返回,add Method AJAX异步加载表单。
.delegate("#input", "click", function(o) {
var obj = $(o).parent().parent().child();
typeof this["tel"] != "undefined" || (this["tel"] = "");
var x = Number($("X").html()), y = Number($("Y").html());
if (o.checked) {
this["tel"] += obj.eq(2).html() +"|";
x += Number(obj.back().eq(3).html());
x += Number(obj.back().eq(4).html());
x += Number(obj.back().eq(5).html());
y += Number(obj.back().eq(6).html());
} else {
var reg = new RegExp(obj.eq(2).html());
this["tel"] = this["tel"].replace(reg, "");
x -= Number(obj.back().eq(3).html());
x -= Number(obj.back().eq(4).html());
x -= Number(obj.back().eq(5).html());
y -= Number(obj.back().eq(6).html());
}
$("X").html(x), $("Y").html(y), $("Z").html(x + y);
}).end()
.create("div").attr("className", "show")
.html("\
总金额:<span id='Z'>0</span>元 | \
话 费:<span id='X'>0</span>元 | \
座机费:<span id='Y'>0</span>元 | \
全 选:<input type='checkbox'> \
<input type='button' value='缴 费'>\
").child()
.each(function() {
/^checkbox$/i.test(this.type) && $(this).attr("onclick", function() {
typeof $("Tab").attr("tel") != "undefined" || $("Tab").attr("tel", "");
if (this.checked) {
var x = 0, y = 0, s = "";
$("Tab").html().replace(/\d{7}[\S\s]*?\d{4}-/g, function($) {
var arr = $.match(/[^>]+(?=<\/)/g);
x += Number(arr[1]) + Number(arr[2]) + Number(arr[3]);
y += Number(arr[4]);
s += arr[0] + "|";
});
$("Tab").attr("tel", s);
$("Tab^input").checked(true);
$("X").html(x), $("Y").html(y), $("Z").html(x + y);
} else {
$("Tab").attr("tel", "");
$("Tab^input").checked(false);
$("X").html(0), $("Y").html(0), $("Z").html(0);
}
});
/^button$/i.test(this.type) && $(this).attr("onclick", function() {
var url = "serverPath" + "?tel=" + [$("Tab").attr("tel") || ""];
url += "&hf=" + $("X").html() + "&zj" + $("Y").html() + "&ze=" + $("Z").html();
url = encodeURI(url);
alert("请求API:" + url)
})
})
})
</script>