javascript - 排序表不对输入进行排序

Question

如何对我使用的下表进行排序 var rows = $('#mytable tbody tr').get(); 我是否还应该包含 div 和 span 以及输入顺序上类？排序不起作用

HTML

<table id="mytable" class="table">
            <thead>
                <tr>
                    <th id="employee" class="col-xs-2">Employee</th>
                    <th id="basic_pay" style="color:#337ab7;">basic pay</th>
                    <th id="tax" style="color:#337ab7;">tax</th>
                    <th id="loans" style="color:#337ab7;">loans</th>
                </tr>
            </thead>
            <tbody>
                <% @pay_list.each do |a| %>
                    <tr>
                        <td><%= a.user.profile.full_name %></td>
                        <td>
                            <div class="input-group">
                                <span class="input-group-addon">₱</span>
                                <input value="12000.0" class="form-control 
                                 currency" id="display_basic_pay_4">
                            </div>
                            <input type="hidden" id="child_num_<%= a.id %>" value="<%= a.user.profile.num_of_children%>" />
                        </td>
                            <td>
                            <div class="input-group">
                                <span class="input-group-addon">₱</span>
                                <input value="12000.0" class="form-control 
                                 currency" id="display_basic_pay_4">
                            </div></td>
                        <% end %>
                    </tr>
                <% end %>
            </tbody>
        </table>  

Javascript

<script>
function sortTable(f,n){
    var rows = $('#mytable tbody tr').get();
    rows.sort(function(a, b) {
        var A = getVal(a);
        var B = getVal(b);
        if(A < B) {
            return -1*f;
        }
        if(A > B) {
            return 1*f;
        }
        return 0;
    });
    function getVal(elm){
        var v = $(elm).children('td').eq(n).text().toUpperCase();
        if($.isNumeric(v)){
            v = parseInt(v,10);
        }
        return v;
    }
    $.each(rows, function(index, row) {
        $('#mytable').children('tbody').append(row);
    });
}

var f_basic_pay = 1;
var f_tax = 1;
$("#basic_pay").click(function(){
    f_basic_pay *= -1;
    var n = $(this).prevAll().length;
    sortTable(f_basic_pay,n);
});
$("#tax").click(function(){
    f_tax *= -1;
    var n = $(this).prevAll().length;
    sortTable(f_tax,n);
});

用于<%值%>的导轨

Answer 1

Looking to the documentation here, the function $.text() will returns all combined text contents. That means, it's an equivalent of .html() but combining all tag childrens.

您想要做的是按 html 属性值排序:<input value="12000.0" ... ，和text()无法阅读它们。 您可以使用:

function getVal(elm){
    var v = $(elm).children('td input.currency').eq(n).val().toUpperCase();
    [...]
}