您好，我正试图从每一行获得总费用。以下是截图的实际截图：
link：http://i.imgur.com/0lY4sJl.png
正如您所看到的，1行已经通过乘法5 * 2计算出其总数。但这仅发生在第一行，但我很乐意在每行中计算它。我认为它是因为每行中的名称变量相同，这就是为什么javascript无法计算每一行的总数。我想我需要一个for循环来解决这个问题。但我真的不知道怎么做。这是我目前的代码：
@foreach ($project->projecttask as $pt)
<tr>
<td>
{{ $pt->task['task_name'] }}
</td>
<td>
<input type="hidden" name="projectId" value="{{$project->id}}"/>
{{Form::hidden('hour', $project->hour)}}
</td>
<td>
{{ Form::text('hour', $pt->hour, array('class' => 'form-control', 'id'=>'hour')) }}
</td>
<td>
{{ Form::text('hour_salary', $pt->hour_salary, array('class' => 'form-control', 'id'=>'hour_salary')) }}
</td>
<td>
{{ Form::text('total_salary', $pt->total_salary, array('class' => 'form-control', 'id'=>'total_salary', 'disabled')) }}
{{-- {{ Form::text('total_salary', $project->total_salary, array('class' => 'form-control', 'id'=>'total_salary', 'disabled')) }}--}}
</td>
<td>
<div class="dropdown">
<button type="button" class="btn btn-danger dropdown-toggle selDelete" data-toggle="dropdown">
<input id="check1" name="checkbox[]" type="checkbox" class="check" >
<span class="caret-hover caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="selDelete" role="menu">
<li><a href= "{{ route('user.projecttasks.destroy',array( $pt->id )) }}" data-method="delete" >Delete</a></li>
</ul>
</div>
</td>
</tr>
@endforeach
<script>
$(function(){
updateTotal();
});
var updateTotal = function(){
var hour_salary = parseFloat($("#hour_salary").val()); // get number as float
// alternately parseInt(string, 10), in case you work with integers
var hour = parseFloat($("#hour").val());
if (!isNaN(hour_salary)) { // the input is a number
$("#total_salary").val(hour_salary * hour); // update second field
} else { // the input wasn't a number
$("#total_salary").val("not a number?"); // show an error mesage
}
};
// we used jQuery 'keyup' to trigger the computation as the user type
$("#hour_salary").keyup(function() { // when key is released in "#inputfield1"
// "change()" is also possible instead of "keyup()", slightly different behavior
updateTotal();
});
// we used jQuery 'keyup' to trigger the computation as the user type
$("#hour").keyup(function() { // when key is released in "#inputfield1"
// "change()" is also possible instead of "keyup()", slightly different behavior
var hour_salary = parseFloat($("#hour_salary").val()); // get number as float
// alternately parseInt(string, 10), in case you work with integers
var hour = parseFloat($("#hour").val());
if (!isNaN(hour_salary)) { // the input is a number
$("#total_salary").val(hour_salary * hour); // update second field
} else { // the input wasn't a number
$("#total_salary").val("not a number?"); // show an error mesage
}
});
</script>
有人可以帮助我吗？
答案 0 :(得分：0)
是的，首先你应该在这里使用课程而不是ID。您应该只在同一页面上拥有唯一的ID。
其次，您可能希望将计算限制在同一行，方法是抓住事件的当前行并找到要在其中更改的元素。
第三，你不需要分离你的keyup函数，这只是做了更多工作。事实上，由于第二个keyup函数是updateTotal的副本，因此完全没有必要：
// Added a variable that this function accepts, "row", so it knows its location in the document
var updateTotal = function(row){
// Define all elements as descendants of the "row" passed in
var salary = row.find(".hour_salary"),
hour = row.find(".hour"),
total = row.find(".total_salary");
var salaryVal = parseFloat(salary.val());
var hourVal = parseFloat(hour.val());
// Added another check for hourVal being a number as well
if (!isNaN(salaryVal) || !isNaN(hourVal)) {
total.val(salaryVal * hourVal);
} else {
total.val("not a number?");
}
};
//Run same keyup function for both text boxes
$(".hour_salary, .hour").keyup(function() {
// Find the row
var row = $(this).closest('tr');
// Pass in the row
updateTotal(row);
});
注意：我已将所有ID选择器更改为类，因此只有在HTML中反映出来之后才会有效。
希望这有帮助。
答案 1 :(得分：0)
有点晚了，但我已经使用以下代码解决了这个问题（对于那些感兴趣的人）：
@foreach ($project->projecttask as $pt)
<tr>
<td>
{{ Form::select('id_task', array('0' => 'no task selected', 'tasks'=>Task::lists('task_name','id') ), null, array('class' => 'form-control')) }}
</td>
<td>
{{$pt->hour}}
<input type="hidden" name="projectId" value="{{$project->id}}"/>
</td>
<td>
{{ Form::text('hour', $pt['hour'], array('class' => 'form-control hour', 'data-row'=>$pt->id , 'id'=>'hour' . $pt->id )) }}
</td>
<td>
{{ Form::text('hour_salary', $pt->hour_salary, array('class' => 'form-control hour_salary', 'data-row'=>$pt->id , 'id'=>'hour_salary' . $pt->id )) }}
</td>
<td>
{{ Form::text('total_salary', $pt->total_salary, array('class' => 'form-control', 'id'=>'total_salary' . $pt->id, 'disabled')) }}
</td>
<td>
<div class="dropdown">
<button type="button" class="btn btn-danger dropdown-toggle selDelete" data-toggle="dropdown">
<input id="check1" name="checkbox[]" type="checkbox" class="check" >
<span class="caret-hover caret"></span>
</button>
{{ $pt->id }}
<ul class="dropdown-menu" aria-labelledby="selDelete" role="menu">
<li><a href= "{{ route('user.projecttasks.destroy',array( 'id' => $pt->id, 'project' => $project->id )) }}" data-method="delete" >Delete</a></li>
</ul>
</div>
</td>
</tr>
@endforeach
<script>
$(function(){
//$('#test').css('color','red');
updateTotal();
});
var updateTotal = function(rowId){
var rowId = rowId,
$hour_salary = $("#hour_salary" + rowId),
$total_salary = $("#total_salary" + rowId);
var hour = parseFloat($("#hour" + rowId).val()),
hour_salary = parseFloat($hour_salary.val());
if ( hour_salary.length > 0 )
$total_salary.val("0");
else
$total_salary.val( hour_salary * hour );
};
$(".hour_salary").keyup(function() {
var $this = $(this);
//wrm row ipv data-row?
var rowId = $this.data('row');
$this.val( $this.val().replace(/\D/g,'') );
updateTotal( rowId );
});
$(".hour").keyup(function() {
var $this = $(this);
var rowId = $this.data('row');
$this.val( $this.val().replace(/\D/g,'') );
updateTotal( rowId );
});
</script>
说实话，我已经得到了我的实习主管的帮助来制作这段代码。