Попытка получить общие затраты в каждой строке jQuery

Question

Привет Я пытаюсь получить общие затраты из каждой строки. Вот скриншот, как это выглядит на самом деле:

ссылка: 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

Немного поздно, но я уже исправил с помощью следующего кода (для тех, кто заинтересован):

@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

Да, сначала вы должны использовать классы здесь, а не идентификаторы. У вас должны быть только уникальные идентификаторы на одной странице.

Во-вторых, вы, вероятно, хотите ограничить свои вычисления той же строкой, захватив текущую строку события и найти в нем элементы, которые будут меняться.

В-третьих, вам не нужно отделять свои функции 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 ,

Надеюсь, это поможет.