试图获得每行jQuery的总成本

Question

您好，我正试图从每一行获得总费用。以下是截图的实际截图：

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>

有人可以帮助我吗？

Answer 1

是的，首先你应该在这里使用课程而不是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中反映出来之后才会有效。

希望这有帮助。

Answer 2

有点晚了，但我已经使用以下代码解决了这个问题（对于那些感兴趣的人）：

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

说实话，我已经得到了我的实习主管的帮助来制作这段代码。