3

嗨，我正在使用这个表来计算总和。我要做的是我想从 r1、r2、r3 下面的文本框中获取输入，并从下面的框中计算总和，例如：-totalcost= r1.value*5+r2.value*6+r3.value*5像这样它必须发生在每个行值 onclick....我该怎么做？

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function updatesum() {
var totalFields = document.input.time.length;
for(var i=0; i <= totalFields; i++){
    document.input.total[i].value = ( document.input.time[i].value * document.input.cost[i].value);
}
return false; 
}
</script>

<style>
input {
    float: right;
}
</style>
</head>
<body>
<form name="input" action="#" method="post" onsubmit="return false;">
<table border="1">
<tr><th>Sl.no</th><th>id</th><th>title</th><th>R1<br><input type="text" name="cost" value=" "></th><th>R2<br><input type="text" name="cost" value=" "></th><th>R3<br><input type="text" name="cost" value=" "></th><th>Total Cost</th></tr>
<tr><td>1</td><td>1.1</td><td>task1</td><td><input type="text" name="time" value="5" disabled></td><td><input type="text" name="time" value="6" disabled></td><td><input type="text" name="time" value="5" disabled></td><td><input type="text" name="cost" value=" " disabled></td></tr>
<tr><td>2</td><td>1.2</td><td>task1</td><td><input type="text" name="time" value="7" disabled></td><td><input type="text" name="time" value="8" disabled></td><td><input type="text" name="time" value="2" disabled></td><td><input type="text" name="cost" value=" " disabled></td></tr>
<tr><td>3</td><td>1.4</td><td>task1</td><td><input type="text" name="time" value="9" disabled></td><td><input type="text" name="time" value="4" disabled></td><td><input type="text" name="time" value="7" disabled></td><td><input type="text" name="cost" value=" " disabled></td></tr>
<tr><td colspan="7"><input type="submit" value="submit" name="submit" onclick="updatesum()"></td></tr>
</table>
</form>
</body>
</html>
4

4 回答 4

3

我会沿着这些思路去做：

var i, j, k, sum, tdlist,
    trlist = document.getElementsByTagName("tr"),
    multipliers = [5, 6, 5];
//start with 1 to ignore first line
for (i=1; i < trlist.length; i++) {
    tdlist = trlist[i].childNodes;
    sum = 0;
    k = 0;
    //j start with the fourth td and stop before the last one
    for (j=3; j < tdlist.length-1; j++) {
        sum += parseInt(tdlist[j].firstChild.value, 10) * multipliers[k];
        k++;
    }
    // Set the last element value
    trlist[i].lastChild.firstChild.value = sum;
}

编辑：忘记乘数值

于 2013-06-06T07:20:08.947 回答
2

为所有文本框添加一个 CSS 类。然后您可以遍历所有具有相同 css 类的文本框以获取它们的值并将它们求和。

像这样的东西：

 var sum = 0;
 $(".amount").each(function (i) {
    var val = $(this).val();
    if (val != "") {

        sum = sum+ parseFloat(val);
    }
    else {
        sum = sum+ 0;
    }

});

这里的数量是所有文本框上的 css 类。

您将需要 Jquery 来运行上面的脚本。或者如果您不想使用 Jquery，我认为此链接可以帮助您通过相同的类名获取所有元素。然后你可以使用你的 for 循环。

于 2013-06-06T07:12:56.343 回答
0 
    <table class="tableclass" border="1">
<tr><th>Sl.no</th><th>id</th><th>title</th><th>R1<br><input type="text" name="cost" value=" "></th><th>R2<br><input type="text" name="cost" value=" "></th><th>R3<br><input type="text" name="cost" value=" "></th><th>Total Cost</th></tr>
<tr><td>1</td><td>1.1</td><td>task1</td><td><input type="text" name="time" value="5" disabled></td><td><input type="text" name="time" value="6" disabled></td><td><input type="text" name="time" value="5" disabled></td><td><input type="text" name="cost" value=" " disabled></td></tr>
<tr><td>2</td><td>1.2</td><td>task1</td><td><input type="text" name="time" value="7" disabled></td><td><input type="text" name="time" value="8" disabled></td><td><input type="text" name="time" value="2" disabled></td><td><input type="text" name="cost" value=" " disabled></td></tr>
<tr><td>3</td><td>1.4</td><td>task1</td><td><input type="text" name="time" value="9" disabled></td><td><input type="text" name="time" value="4" disabled></td><td><input type="text" name="time" value="7" disabled></td><td><input type="text" name="cost" value=" " disabled></td></tr>
<tr><td colspan="7"><input type="submit" value="submit" name="submit" onclick="updatesum()"></td></tr>
</table>

//查询代码

 rowElements = $(".tableClass > tr");
    $.each(rowElements , function(){
    currentObj = $(this);
    allInputTypesRow = currentObj.find("input");
    r1 = allInputTypesRow.eq(0).val();
    r2 = allInputTypesRow.eq(1).val();
    r3 = allInputTypesRow.eq(2).val();
    //Your formula to calculate
    //Set the value in the last cell
    });
于 2013-06-06T07:23:12.683 回答
0

嘿，我不愿意写完整的代码，但这是主要部分

var x=document.getElementsByTagName("input"); //x object created with property Length
for(var i=0;i<=2;i++)
{
x[i].value=(x[i+3].value*5)+(x[i+7].value*5)+(x[i+11].value*5);  //r1*5+r2*6+r3*5
}

好吧，这是一种快速的方法

于 2013-06-06T07:43:27.450 回答