有表格如:
[添加]
------------------------------------------------------
操作 货品编号 货品数量 货品单价
------------------------------------------------------
当点击添加时:这新增一行
------------------------------------------------------
操作 货品编号 货品数量 货品单价
------------------------------------------------------
【删除】 【select选择货品】 【text 可编辑】 【text 可编辑】
------------------------------------------------------合计 : 总数量 总价
当选好了货品后自动填充货品单价,改变数量时其总数量、总价也跟着变!
即使在点击添加继续选货品最好其总数量就等于货品数量这列的总和,而
总价则等于没件货品的数量*单价之和!
请各位帮忙!谢谢……或思路 或源码都行!
[添加]
------------------------------------------------------
操作 货品编号 货品数量 货品单价
------------------------------------------------------
当点击添加时:这新增一行
------------------------------------------------------
操作 货品编号 货品数量 货品单价
------------------------------------------------------
【删除】 【select选择货品】 【text 可编辑】 【text 可编辑】
------------------------------------------------------合计 : 总数量 总价
当选好了货品后自动填充货品单价,改变数量时其总数量、总价也跟着变!
即使在点击添加继续选货品最好其总数量就等于货品数量这列的总和,而
总价则等于没件货品的数量*单价之和!
请各位帮忙!谢谢……或思路 或源码都行!
<input type=test id=no1 onchange= getTolPrise(1) /> <- 货品数量的控件 后面数字是行数,N行的话用n
<input type=test id=prise1 onchange= getTolPrise(1) /> <- 货品单价的控件 后面数字是行数
<span id=tolPrise1></span> <-总价
//html里面的每个控件加
function getNumber(row){
return document.getElementById("no"+row).value;
}
function getPrise(row){
return document.getElementById("prise"+row).value;
}
function getTolPrise(row){
var pri= getPrise(row);
var num= getNumber(row);
if(pri&&num) document.getElementById("tolPrise"+row).value= pri* num;
}
<script type="text/javascript" src="jquery.js"></script>
<script>
var numm = 0;
function $O(id){
return document.getElementById(id);
}
function getNumbs(id)
{
//alert("num:"+id);
return $O("numbs"+id).value;
}
function getPrices(id)
{
//alert("prices:"+id);
return $O("price"+id).value;
}
function getTolalPrise(id)
{
//alert(id);
var pri = getPrices(id);
var num = getNumbs(id);
if(pri && num ) $O("xj"+id).value = pri * num;
}function getAllNumbers(){
var nbs= 0;
$("input[@type='text'][@checked]").each(function()
{
//var nubb = eval($(this).val());
if(isNaN($(this).val()))
nbs = 0;
else
nbs += eval($(this).val());
})
return nbs;
//alert(nbs);
//$('#msgnumbs').html(nbs);
//document.getElementById('msgnumbs').innerHTML=nbs;}
function getAllTolPrise(id)
{
// getTolalPrise(id);
var nbs= 0;
$("input[@type='hidden'][@checked]").each(function()
{
if(isNaN($(this).val()))
nbs = 0;
else
nbs += eval($(this).val());
})
//alert(nbs);
$O('msgnumbs').innerHTML = getAllNumbers();
$O("msgprices").innerHTML = nbs;
}
function addRows(){
numm = numm + 1;
var numbers="numbs"+numm;
var prices="price"+numm;
var xjprice = "xj" + numm;
var f="getTolalPrise("+numm+")";
var f1="getAllTolPrise("+numm+")";
var trs="tr"+numm;
var del="reduceRows("+numm+")";
var htmlval = "<tr id='"+trs+"'><td><input type='button' value='删除' onclick='"+del+"'></td><td> </td><td> </td><td><input type='text' checked='checked' id='"+numbers+"' value='0' onkeyup='"+f+"' onblur='"+f1+"' /></td><td><input type='text' id='"+prices+"' value='10' onblur='"+f1+"' onkeyup='"+f+"'></td><input type='hidden' id='"+xjprice+"' value='' checked='checked'></tr>";
$('#content').append(htmlval);
getAllTolPrise(numm);
}
function reduceRows(id)
{
if(numm > 1)
{
if(id == 1){
$("tr:last").remove();
alert("ddd");
}
else
$("#tr"+id).remove() ;
numm=numm-1;
}
getAllTolPrise(numm);
}
</script>
<hr/>
<a href="javascript:addRows();">[新增行]</a>
<table border="1" width="100%">
<tr>
<th>操作</th>
<th>id</th>
<th>name</th>
<th>number</th>
<th>price</th>
</tr>
<tbody id="content"></tbody>
</table>
共计:总数量:<label id="msgnumbs" title="总数量"></label>--------------------------总价格:<label id="msgprices" title="总价格"></label>别忘啦加上jquery !