使用jQuery在html表中添加两个单元格

时间:2014-12-13 15:54:05

标签: jquery html

我写了一段代码。此代码从用户获取两个输入并添加它们并在一个单元格中打印它们然后采用相同的两个单元格并将它们相乘并在另一个单元格中打印它们。这是我的代码正在工作但在此之后我试图取两个结果并再次添加它们这部分不起作用。

我做错了什么?

这是代码提前感谢

<HTML>
<HEAD>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
function addition(that){
var sum=0;
$("."+that).each(function(){
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
return(sum);
}
function multiply(that){
var prdt=1;
$("."+that).each(function(){
if(!isNaN(this.value) && this.value.length!=0) {
prdt *= parseFloat(this.value);
}
});
return(prdt);
}
</script>
    </HEAD>
<BODY>
<table border='1'>
<tr>
<td><input  class="a" id="c" type="number" name="quantity" min="0" max="99999999999" required/></td>
<td><input class="a" id="b" type="number" name="quantity" min="0" max="99999999999" required/></td>
<td class="z" id="sum">0</td>
<td class="z" id="mul"></td>
<td id="result"></td>
</tr>
<script>
$(document).ready(function(){
$(".a").each(function(){
$(this).keyup(function(){
x=addition($(this).attr("class"));
$("#sum").html(x);

});
});

$(".a").each(function(){
$(this).keyup(function(){
x=multiply($(this).attr("class"));
$("#mul").html(x);

});
});

$("td.z").each(function(){
$(this).keyup(function(){
x=addition($(this).attr("class"));
$("#result").html(x);

});
});


});


</script>
</table>
</BODY>
</html>

1 个答案:

答案 0 :(得分:0)

我接受了部分代码并稍微改了一下。 实际上,我使用“setInterval”函数为#result提供前两个字段的总和...看看:

<script>
$(document).ready(function(){
$(".a").each(function(){
$(this).keyup(function(){
x=addition($(this).attr("class"));
$("#sum").html(x);

});
});

$(".a").each(function(){
$(this).keyup(function(){
x=multiply($(this).attr("class"));
$("#mul").html(x);

});
});

//    $("td.z").each(function(){
//    $(this).keyup(function(){
//    x=addition($(this).attr("class"));
//    $("#result").html(x);

setInterval(function() {
var z = parseFloat($("#sum").text())+ parseFloat($("#mul").text());
if(!isNaN(z)) {
    $("#result").text(z);
}
}, 500);

});
});


});


</script>

FIDDLE HERE:http://jsfiddle.net/1rcuqskj/1/

希望这适合你!