Question

您好我正在使用this table来计算总和。我要做的是我想从r1，r2，r3下方的文本框中获取输入，并从下面的方框中计算总和例如： - totalcost= r1.value*5+r2.value*6+r3.value*5就像这样，它必须在每个行值上发生...点击....我怎么能这样做？

这里是我的代码：

<!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>

Answer 1

我按照这些方针去做：

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;
}

编辑：忘记了乘数值

Answer 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，我认为this link可以帮助您通过相同的类名获取所有元素。然后你可以使用你的for循环。

Answer 3

    <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>

// JQUERY CODE

 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
    });

Answer 4

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

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
}

这是快速的方法

如何计算多行的总和？

4 个答案: