Получить общее значение определенного столбца в таблице нескольких строк

Question

Я создал таблицу, в которой я могу динамически добавлять к ней несколько строк. Для увеличения стоимости стоит столбец. Теперь я хочу, чтобы получить общую стоимость стоимости каждой строки в нижней части таблицы. Как я могу получить это с помощью JavaScript?

Вот мой html-код для динамической таблицы.

<table> 
    <thead> 
     <tr> 
      <th>No</th> 
      <th>Title</th> 
      <th cost</th> 
     </tr> 
    </thead> 
    <tbody id="body"> 

     <tr> 
      <th>1</th> 
      <td> 
       <input type="text" id="title" name="title[]" /> 
      </td> 
      <td> 
       <input type="text" id="cost" name="cost[]" /> 
      </td> 
     </tr> 
    </tbody>   
</table> 

функция JavaScript:

$(function(){ 
     $('.addrow').click(function(){ 
      addrow(); 
     }); 


     function addrow() 
     { 

      var row =($('#body tr').length-0)+1; 
      var tr ='<tr>'+ 
       '<th>'+row+'</th>'+ 
       '<td><input type="text" id="title" name="title[]" ></td>'+ 
       '<td><input type="text" id="cost" name="cost[]" /></td>'+ 
       '</tr>'; 
      $('#body').append(tr); 
     } 
    }); 

Answer 1

Вы должны итерируете входные данные тегов, которые принадлежат к столу и имеют идентификатор начиная с «стоимостью».

Кроме того, вы не можете добавить строки непосредственно к тела, вы хотите, чтобы добавить его после того, как последний ряда уже создан.

Попробуйте это (редактировать:) скрипку (старые привычки живучи) сниппет.

$(document).ready(function(){ 
 
     $('#addRow').click(function(){ 
 
      addRow(); 
 
     }); 
 
     $('#totalRow').click(function(){ 
 
      totalRow(); 
 
     }); 
 

 

 
     function addRow() 
 
     { 
 
      var rowId = $('#myTable tr').length; 
 
\t \t \t $('#myTable > tbody:last-child').append(
 
    \t \t \t '<tr><th>' + rowId + ' </th>' + 
 
    \t \t \t '<td><input type="text" id="title' + rowId + '" /></td>' + \t 
 
       '<td><input type="text" id="cost' + rowId + '"</td></tr>' 
 
\t \t \t); 
 
    \t \t } 
 
    
 
     function totalRow() 
 
     { 
 
      var rowId = $('#myTable tr').length; 
 
      var val = 0; 
 
      $("#myTable [id^=cost]").each(function() {  
 
    \t \t \t val += parseFloat($(this).val()); 
 
\t \t \t }); 
 
\t \t \t $('#myTable > tbody:last-child').append(
 
    \t \t \t '<tr><th>T</th>' + 
 
    \t \t \t '<td><input type="text" id="totalRow" value="TOTAL" /></td>' + \t 
 
       '<td><input type="text" id="totalCost" value="' + val +'" /></td></tr>' 
 
\t \t \t); 
 
\t \t } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="addRow">Add row</div> 
 
<div id="totalRow">Calculate total row</div> 
 
<br> 
 
<table id="myTable"> 
 
    <thead> 
 
     <tr> 
 
      <th>No</th> 
 
      <th>Title</th> 
 
      <th>Cost</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <th>1</th> 
 
      <td> 
 
       <input type="text" id="title1" value="Example" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" id="cost1" value="25" /> 
 
      </td> 
 
     </tr> 
 
    </tbody>   
 
</table>

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

Answer 2

Если текстовые входы только входы используются, попробуйте использовать https://api.jquery.com/input-selector/, чтобы получить все входные селекторы.

Вы можете выполнять итерацию через селектор ввода, суммировать значения, чтобы дать вам общее количество.

ПРИМЕЧАНИЕ. Как указано в комментариях, не используйте одинаковый идентификатор для всех входных тегов. Это не лучшая практика