试图获得每行总成本jQuery

Question

嗨我试图从每一行获得总成本。下面是截图怎么说实际上看起来：

链接：http://i.imgur.com/0lY4sJl.png

正如你可以看到已经拥有了总通过乘法5 * 2计算的1排。但是这只发生在第一行，但我很乐意在每行中计算它。我认为它是因为每行中的同名变量，这就是为什么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

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

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

要真正说实话，我已经从我的实习导师，使这个代码获得帮助。

Answer 2

是的，首先你应该在这里使用类而不是ID。您应该在同一个页面上只有唯一的ID。其次，您可能希望通过抓取事件的当前行并找到要在其中更改的元素，将您的计算限制在同一行。

第三，你不需要分开你的键控功能，这只是使事情更多的工作。事实上，作为第二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 。

希望这会有所帮助。