javascript - 获取多行表中特定列的总值

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

如果文本输入是唯一使用的输入，请尝试使用https://api.jquery.com/input-selector/获取所有输入选择器。

您可以遍历输入选择器，汇总这些值以获得总数。

注意：如评论中所述，不要对所有输入标签使用相同的 id。这不是最佳实践

Answer 2

您应该迭代属于表的输入标签，并具有以“成本”开头的id 。

此外，您不能直接将行添加到body，您想在已创建的最后一行之后添加它。

试试这个（编辑：）小提琴（旧习惯难改）片段。

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


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

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

希望能帮助到你！