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

您应该迭代属于该表的输入标记，并以＆＃34; cost＆＃34;开头 id 。

此外，您无法将行直接添加到正文，您希望在已创建的最后一个行之后添加行。 / p>

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

＆＃13;

$(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>'
			);
		}
    });

＆＃13;

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

＆＃13;

希望它有所帮助！

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

2 个答案: