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);
});

＆lt;％values％＆gt;

使用了rails

Answer 1

查看文档here，函数 $.text()将返回所有组合文字内容。这意味着，它相当于.html()，但结合了所有标记儿童。

您要做的是按html属性值排序：<input value="12000.0" ...，而text()无法读取它们。您可以改为使用：

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

Answer 2

我在单元格的输入字段中添加了一个css类，并更新了getVal（）方法以检索此值以进行比较。请查看以下代码段：

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 element = $(elm).children('td').get(n);
        
        var v = $(".sort_val",element).val()
        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);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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="sss" style="color:#337ab7;">sss</th>
                    <th id="hdmf" style="color:#337ab7;">hdmf</th>
                    <th id="phil_health" style="color:#337ab7;">phil_health</th>
                </tr>
            </thead>
            <tbody>
                
                    <tr>
                        <td>  User 1 </td>
                        <td>
                            <div class="input-group">
                                <span class="input-group-addon">₱</span>
                                <input value="14000.0" class="form-control 
                                 currency sort_val" id="display_basic_pay_14">
                            </div>
                            <input type="hidden" id="child_num_14" value="14" />
                        </td>
                            <td>
                            <div class="input-group">
                                <span class="input-group-addon">₱</span>
                                <input value="14000.0" class="form-control 
                                 currency sort_val" id="display_basic_pay_4">
                            </div></td>
                       
                    </tr>
                     <tr>
                        <td>  User 2 </td>
                        <td>
                            <div class="input-group">
                                <span class="input-group-addon">₱</span>
                                <input value="12000.0" class="form-control 
                                 currency sort_val" id="display_basic_pay_4">
                            </div>
                            <input type="hidden" id="child_num_12" value="12" />
                        </td>
                            <td>
                            <div class="input-group">
                                <span class="input-group-addon">₱</span>
                                <input value="12000.0" class="form-control 
                                 currency sort_val" id="display_basic_pay_4">
                            </div></td>
                       
                    </tr>
                     <tr>
                        <td>  User 3 </td>
                        <td>
                            <div class="input-group">
                                <span class="input-group-addon">₱</span>
                                <input value="15000.0" class="form-control 
                                 currency sort_val" id="display_basic_pay_4">
                            </div>
                            <input type="hidden" id="child_num_15" value="15" />
                        </td>
                            <td>
                            <div class="input-group">
                                <span class="input-group-addon">₱</span>
                                <input value="15000.0" class="form-control 
                                 currency sort_val" id="display_basic_pay_4">
                            </div></td>
                       
                    </tr>
               
            </tbody>
        </table>

排序表不排序输入

2 个答案: