堆栈内存溢出
  繁体   English   中英

排序动态表jQuery

[英]Sorting Dynamic Table jQuery

 原文  2018-02-07 03:28:02  6   2    javascript/ jquery/ html

问题描述

在对我通过添加联系人按钮添加新行动态创建的表格进行排序时需要帮助。 我设法通过单击列标题来对其进行排序，但是我需要使其与HTML标记一起使用。 该表具有索引列，名字列，姓氏列，电子邮件，密码和电话列。 我只是将索引设为随机的，所以我不需要在输入字段中输入任何内容，而是可以尝试通过添加新的Contact（行）对表进行排序，并按索引对它们进行排序以开始。 我只需要帮助按索引对它们进行排序并填充表。 其余的我会弄清楚的。 任何帮助将不胜感激。 

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <link rel="stylesheet" type="text/css" media="screen" href="CSS/style.css" />
    </head>
    <body>
        <div id="inputs-div">
            <input type="text" placeholder="Your Name Sir" id="name-input">
            <input type="text" placeholder="Your Last Name Sir" id="lastname-input">
            <input type="text" placeholder="Your Email Sir" id="email-input">
            <input type="password" placeholder="Your Password Sir" id="pass-input" >
            <input type="text" placeholder="Your Phone Number" id="phone-input" >
            <button id="new-row-btn">Add Contact</button>
        </div>

        <select class="custom-select" id="sort">
                <option selected>Choose...</option>
                <option value="1">Index</option>
                <option value="2">First Name</option>
                <option value="3">Last Name</option>
                <option value="4">Email</option>
                <option value="5">Phone Number</option>
        </select>

        <div>
            <table id="my-table">
                <thead>
                    <tr id="first-row">
                        <th>ID</th>
                        <th>First name</th>
                        <th>Last name</th>
                        <th>Email</th>
                        <th>Password</th>
                        <th>Phone</th>
                        <th>Sxxxy Action</th>
                        <th>Delete Action</th>
                    </tr>
                </thead>
                <tbody id="tbody">

                </tbody>
            </table>
        </div>

        <script src="JS/jquery-3.2.1.js"></script>
        <script src="JS/script.js"></script>
    </body>
</html>

这是脚本 

$(document).ready(function(){

let idCounter = parseFloat(Math.random() * 100).toFixed(0)

    $('#new-row-btn').click(function(){

        $("#my-table").append("<tr><td class='td-id'>"+ idCounter+"</td><td class='f_Name'>"+$("#name-input").val()+
        "</td><td class='l_Name'>"+$("#lastname-input").val()+
        "</td><td class='e_mail'>"+$("#email-input").val()+
        "</td><td class='pass_in'>"+$("#pass-input").val()+
        "</td><td class='phone_in'>"+$("#phone-input").val()+
        "</td><td class='td-three-Btn'><button id='saveBtn"+idCounter+"' class='save-Btn'>save</button><button id='editBtn"+idCounter+"' class='edit-Btn'>edit</button><button id='delBtn"+idCounter+"' class='del-Btn'>del</button></td>"+ "<td class='td-del'><button class='del-row'>Del</button></td>"+ "</tr>")

        $("#name-input").val("")
        $("#lastname-input").val("")
        $("#email-input").val("")
        $("#pass-input").val("")
        $("#phone-input").val("")
        idCounter++;

            $("td:even").css( "background-color", "#a35635" );
            $("td:odd").css( "background-color", "#828e20" );


            idCounter = parseFloat(Math.random() * 100).toFixed(0)

    });

    $(document).on('click', '.del-row', function (event) {
        $(event.target).parent().parent().remove()
        $("td:even").css( "background-color", "#a35635" );
        $("td:odd").css( "background-color", "#828e20" );
});

    $(document).on('click', '.edit-Btn', function (event) {
        var $row = $(this).closest('tr');
        var id = $row.find('.td-id').text();
        var fName = $row.find('.f_Name').text();
        var lName = $row.find('.l_Name').text();
        var email = $row.find('.e_mail').text();
        var pass = $row.find('.pass_in').text();
        var phone = $row.find('.phone_in').text();



        let choose_your_poison = "<td class='td-id'>"+ id +"</td><td class='f_Name'>"+"<input class='in_f_name' type='text' value='"+fName+"'>"+
        "</td><td class='l_Name'>"+"<input class='in_l_name' type='text' value='"+lName+"'>"+
        "</td><td class='e_mail'>"+"<input class='in_e_mail' type='text' value='"+email+"'>"+
        "</td><td class='pass_in'>"+"<input class='in_pass_in' type='text' value='"+pass+"'>"+
        "</td><td class='phone_in'>"+"<input class='in_phone_in' type='text' value='"+phone+"'>"+
        "</td><td class='td-three-Btn'><button id='saveBtn"+idCounter+"' class='save-Btn'>save</button><button id='editBtn"+idCounter+"' class='edit-Btn'>edit</button><button id='delBtn"+idCounter+"' class='del-Btn'>del</button></td>"+ "<td class='td-del'><button class='del-row'>Del</button></td>"

        $(this).closest('tr').html(choose_your_poison);

        $("td:even").css( "background-color", "#a35635" );
        $("td:odd").css( "background-color", "#828e20" );


        let edit = $row.find('.edit-Btn')
        let del_btn = $row.find('.del-Btn')
        let save_btn = $row.find('.save-Btn')

        edit.css('display','none');
        del_btn.css('display','none');
        save_btn.css('display','block');
    });


    $(document).on('click', '.save-Btn', function (event) {

        var $row = $(this).closest('tr');

        var f_Name = $row.find('.in_f_name').val();
        var l_Name = $row.find('.in_l_name').val();
        var e_Mail = $row.find('.in_e_mail').val();
        var pass_W = $row.find('.in_pass_in').val();
        var phone_N = $row.find('.in_phone_in').val();


        $row.find('.f_Name').html(f_Name);
        $row.find('.l_Name').html(l_Name);
        $row.find('.e_mail').html(e_Mail);
        $row.find('.pass_in').html(pass_W);
        $row.find('.phone_in').html(phone_N);


        let edit = $row.find('.edit-Btn')
        let del_btn = $row.find('.del-Btn')
        let save_btn = $row.find('.save-Btn')

        edit.css('display','inline');
        del_btn.css('display','inline');
        save_btn.css('display','none');

    });

//===================================================================
// Need Help
//===================================================================


$("#sort").on("change", function(event){
        var pickedValue = event.target.value;

        switch(pickedValue){
            case '1': //sort by index
            sortTable = (function(a, b){
                var asc  = order === 'asc',
                tbody = table.find('tbody');

            tbody.find('tr').sort(function(a, b) {
                if (asc) {
                    return  (parseInt($('td:first', a).text()) - parseInt($('td:first', b).text()));

                }
                else 
                {
                    return (parseInt($('td:first', b).text()) - parseInt($('td:first', a).text()));
                }
            }).appendTo(tbody);

            })
                break;
            case '2': // sort by first name
                sortingFunction = (a, b) => 
                        (a.localeCompare(b));
                break;
            case '3': // sort by last name
                sortingFunction = (a, b) => 
                    (a.localeCompare(b));
                break;
            case '4': // sort by email date
                sortingFunction = (a, b) => 
                    (a.localeCompare(b));
                break;
            case '5': // sort by phone
                sortingFunction = (a, b) => 
                (parseInt(a) - parseInt(b));
                break;
            default:
                break;
        }
        sortTable($('#mytable'),'asc');

    });



//===================================================================
// It works
//===================================================================

$('th').click(function(){
    var table = $(this).parents('table').eq(0)
    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
    this.asc = !this.asc
    if (!this.asc){rows = rows.reverse()}
    for (var i = 0; i < rows.length; i++){table.append(rows[i])}
})
function comparer(index) {
    return function(a, b) {
        var valA = getCellValue(a, index), valB = getCellValue(b, index)
        return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB)
    }
}
function getCellValue(row, index){ return $(row).children('td').eq(index).text() }


});

2 个解决方案

解决方案1
 0 已采纳  2018-02-07 07:09:06

好的，这里是使用现有列标题进行排序的一种可能的解决方案，只需触发对选择选项的单击即可（不确定为什么两者都存在，但是这样做）。 注意添加了第一行，将其克隆并删除了它-应该比编辑代码更易于维护。

我还对类进行了一些自由，使用CSS设置样式而不是脚本，使用类定位目标等。

基本上，这可以操纵编辑中的行。 两个“删除”按钮，但我不知道另一个是什么意思，所以我使用了删除第一行。

这会将表中的“ id”保留为数据，从0开始递增，如果删除了行则不会重复。 

 $(document).ready(function() { // get first row,clone it then remove it var firstRow = $("#my-table") .find('tbody') .find('.contact-row') .first().hide(); var cloneRow = firstRow.clone(true).data('last-row-counter', 0).show(); firstRow.remove(); $('#new-row-btn').on('click', function() { // just use the table to keep track of rows added let idCounter = $("#my-table").data('lastrowadded') + 1; $("#my-table").data('lastrowadded', idCounter); var newRow = cloneRow.clone(true); newRow.find('.save-Btn').hide() newRow.find('.td-id').html(idCounter); newRow.find('.f_Name').html($("#name-input").val()); + newRow.find('.l_Name').html($("#lastname-input").val()); newRow.find('.e_mail').html($("#email-input").val()); newRow.find('.pass_in').html($("#pass-input").val()); newRow.find('.phone_in').html($("#phone-input").val()); $("#my-table").find('tbody').append(newRow); // blank out the onputs $("#inputs-div").find(".contactfield").val(""); }); $('#my-table').on('click', '.del-row', function(event) { $(this).closest('.contact-row').remove(); }); $('#my-table').on('click', '.edit-Btn', function(event) { var $row = $(this).closest('.contact-row'); var edits = $row.find('.f_Name,.l_Name,.e_mail,.pass_in,.phone_in'); edits.each(function(index, element) { var inp = $("<input class='editable' type='text'/>").val($(element).text()); $(element).html(inp); }); $row.find('.edit-Btn').hide(); $row.find('.del-Btn').hide(); $row.find('.save-Btn').show(); }); $('#my-table').on('click', '.save-Btn', function(event) { var $row = $(this).closest('tr.contact-row'); var edits = $row.find('.f_Name,.l_Name,.e_mail,.pass_in,.phone_in'); edits.each(function(index, element) { var inp = $(element).find('input.editable'); $(element).html(inp.val()); }); $row.find('.edit-Btn').show(); $row.find('.del-Btn').show(); $row.find('.save-Btn').hide(); }); $("#sort").on("change", function(event) { var pickedValue = event.target.value; $('#my-table').find('.first-row').find('th').eq(pickedValue).trigger('click'); // console.log(pickedValue); }); $('#my-table').on('click', 'th', function() { var table = $(this).closest('table'); var rows = table.find('tr.contact-row') .toArray() .sort(comparer($(this).index())); this.asc = !this.asc; if (!this.asc) { rows = rows.reverse(); } for (var i = 0; i < rows.length; i++) { table.append(rows[i]); } }); function comparer(index) { return function(a, b) { var valA = getCellValue(a, index), valB = getCellValue(b, index); return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB); } } function getCellValue(row, index) { return $(row).children('td').eq(index).text(); } }); 
 #my-table tbody tr.contact-row>td { background-color: #a35635; } #my-table tbody tr.contact-row>td:nth-child(odd) { background-color: #828e20; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <body> <div id="inputs-div"> <input class="contactfield" type="text" placeholder="Your Name Sir" id="name-input"> <input class="contactfield" type="text" placeholder="Your Last Name Sir" id="lastname-input"> <input class="contactfield" type="text" placeholder="Your Email Sir" id="email-input"> <input class="contactfield" type="password" placeholder="Your Password Sir" id="pass-input"> <input class="contactfield" type="text" placeholder="Your Phone Number" id="phone-input"> <button id="new-row-btn">Add Contact</button> </div> <div> <select class="custom-select" id="sort"> <option selected>Choose...</option> <option value="0">Index</option> <option value="1">First Name</option> <option value="2">Last Name</option> <option value="3">Email</option> <option value="5">Phone Number</option> </select> </div> <div> <table id="my-table" data-lastrowadded="0"> <thead> <tr class="first-row"> <th>ID</th> <th>First name</th> <th>Last name</th> <th>Email</th> <th>Password</th> <th>Phone</th> <th>Sxxxy Action</th> <th>Delete Action</th> </tr> </thead> <tbody> <tr class="contact-row"> <td class='td-id'>0</td> <td class='f_Name'></td> <td class='l_Name'></td> <td class='e_mail'></td> <td class='pass_in'></td> <td class='phone_in'></td> <td class='td-three-Btn'><button class='save-Btn'>save</button><button class='edit-Btn'>edit</button><button class='del-Btn'>del</button> </td> <td class='td-del'> <button class='del-row'>Del Row</button> </td> </tr> </tbody> </table> </div> </body>

解决方案2
 0  2018-02-07 07:28:13

这甚至可以将您的随机数保留为id并对其进行相应排序。

基本上，首先您向每个tr添加一个attr data-id 。 然后，您隐藏所有tr行。 您遍历所有data-id并获取值（这是id的值），并将它们放入数组中。 然后，您可以使用ASC的.sort或DESC的.reverse对数组进行排序。 根据需要更改此值。 然后循环遍历新的排序数组arr并通过根据排序顺序添加每个新行来重新创建html，然后显示... BAM完成！

如果需要按其他字段排序，则可以更改所需的td类的类td-id 

arr.push($(this).find('.td-id').text());

您只需要弄清楚如何让代码知道需要对哪个字段进行排序 

 $(document).ready(function() { let idCounter = parseFloat(Math.random() * 100).toFixed(0) var current; $('#new-row-btn').click(function() { current = ''; $("#my-table").append("<tr class='tr-id' data-id='" + idCounter + "'><td class='td-id'>" + idCounter + "</td><td class='f_Name'>" + $("#name-input").val() + "</td><td class='l_Name'>" + $("#lastname-input").val() + "</td><td class='e_mail'>" + $("#email-input").val() + "</td><td class='pass_in'>" + $("#pass-input").val() + "</td><td class='phone_in'>" + $("#phone-input").val() + "</td><td class='td-three-Btn'><button id='saveBtn" + idCounter + "' class='save-Btn'>save</button><button id='editBtn" + idCounter + "' class='edit-Btn'>edit</button><button id='delBtn" + idCounter + "' class='del-Btn'>del</button></td>" + "<td class='td-del'><button class='del-row'>Del</button></td>" + "</tr>") $("#name-input").val("") $("#lastname-input").val("") $("#email-input").val("") $("#pass-input").val("") $("#phone-input").val("") idCounter++; $("td:even").css("background-color", "#a35635"); $("td:odd").css("background-color", "#828e20"); idCounter = parseFloat(Math.random() * 100).toFixed(0) $('.tr-id').hide(); var arr = []; $('.tr-id').each(function() { arr.push($(this).find('.td-id').text()); }); // if asc use .sort, if desc use .reverse arr.sort(function(a, b) { return a - b; }); var i; for (i = 0; i < arr.length; ++i) { current += "<tr class='tr-id' data-id='" + arr[i] + "'>" + $('.tr-id[data-id="' + arr[i] + '"]').html() + "</tr>"; } $('#tbody').html(current); }); $(document).on('click', '.del-row', function(event) { $(event.target).parent().parent().remove() $("td:even").css("background-color", "#a35635"); $("td:odd").css("background-color", "#828e20"); }); $(document).on('click', '.edit-Btn', function(event) { var $row = $(this).closest('tr'); var id = $row.find('.td-id').text(); var fName = $row.find('.f_Name').text(); var lName = $row.find('.l_Name').text(); var email = $row.find('.e_mail').text(); var pass = $row.find('.pass_in').text(); var phone = $row.find('.phone_in').text(); let choose_your_poison = "<td class='td-id'>" + id + "</td><td class='f_Name'>" + "<input class='in_f_name' type='text' value='" + fName + "'>" + "</td><td class='l_Name'>" + "<input class='in_l_name' type='text' value='" + lName + "'>" + "</td><td class='e_mail'>" + "<input class='in_e_mail' type='text' value='" + email + "'>" + "</td><td class='pass_in'>" + "<input class='in_pass_in' type='text' value='" + pass + "'>" + "</td><td class='phone_in'>" + "<input class='in_phone_in' type='text' value='" + phone + "'>" + "</td><td class='td-three-Btn'><button id='saveBtn" + idCounter + "' class='save-Btn'>save</button><button id='editBtn" + idCounter + "' class='edit-Btn'>edit</button><button id='delBtn" + idCounter + "' class='del-Btn'>del</button></td>" + "<td class='td-del'><button class='del-row'>Del</button></td>" $(this).closest('tr').html(choose_your_poison); $("td:even").css("background-color", "#a35635"); $("td:odd").css("background-color", "#828e20"); let edit = $row.find('.edit-Btn') let del_btn = $row.find('.del-Btn') let save_btn = $row.find('.save-Btn') edit.css('display', 'none'); del_btn.css('display', 'none'); save_btn.css('display', 'block'); }); $(document).on('click', '.save-Btn', function(event) { var $row = $(this).closest('tr'); var f_Name = $row.find('.in_f_name').val(); var l_Name = $row.find('.in_l_name').val(); var e_Mail = $row.find('.in_e_mail').val(); var pass_W = $row.find('.in_pass_in').val(); var phone_N = $row.find('.in_phone_in').val(); $row.find('.f_Name').html(f_Name); $row.find('.l_Name').html(l_Name); $row.find('.e_mail').html(e_Mail); $row.find('.pass_in').html(pass_W); $row.find('.phone_in').html(phone_N); let edit = $row.find('.edit-Btn') let del_btn = $row.find('.del-Btn') let save_btn = $row.find('.save-Btn') edit.css('display', 'inline'); del_btn.css('display', 'inline'); save_btn.css('display', 'none'); }); //=================================================================== // Need Help //=================================================================== $(document).on("change", "#sort", function(event) { var pickedValue = event.target.value; switch (pickedValue) { case '1': //sort by index sortTable = (function(a, b) { var asc = order === 'asc', tbody = table.find('tbody'); tbody.find('tr').sort(function(a, b) { if (asc) { return (parseInt($('td:first', a).text()) - parseInt($('td:first', b).text())); } else { return (parseInt($('td:first', b).text()) - parseInt($('td:first', a).text())); } }).appendTo(tbody); }) break; case '2': // sort by first name sortingFunction = (a, b) => (a.localeCompare(b)); break; case '3': // sort by last name sortingFunction = (a, b) => (a.localeCompare(b)); break; case '4': // sort by email date sortingFunction = (a, b) => (a.localeCompare(b)); break; case '5': // sort by phone sortingFunction = (a, b) => (parseInt(a) - parseInt(b)); break; default: break; } sortTable($('#mytable'), 'asc'); }); //=================================================================== // It works //=================================================================== $('th').click(function() { var table = $(this).parents('table').eq(0) var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index())) this.asc = !this.asc if (!this.asc) { rows = rows.reverse() } for (var i = 0; i < rows.length; i++) { table.append(rows[i]) } }) function comparer(index) { return function(a, b) { var valA = getCellValue(a, index), valB = getCellValue(b, index) return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB) } } function getCellValue(row, index) { return $(row).children('td').eq(index).text() } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <title>Page Title</title> <link rel="stylesheet" type="text/css" media="screen" href="CSS/style.css" /> </head> <body> <div id="inputs-div"> <input type="text" placeholder="Your Name Sir" id="name-input"> <input type="text" placeholder="Your Last Name Sir" id="lastname-input"> <input type="text" placeholder="Your Email Sir" id="email-input"> <input type="password" placeholder="Your Password Sir" id="pass-input"> <input type="text" placeholder="Your Phone Number" id="phone-input"> <button id="new-row-btn">Add Contact</button> </div> <select class="custom-select" id="sort"> <option selected>Choose...</option> <option value="1">Index</option> <option value="2">First Name</option> <option value="3">Last Name</option> <option value="4">Email</option> <option value="5">Phone Number</option> </select> <div> <table id="my-table"> <thead> <tr id="first-row"> <th>ID</th> <th>First name</th> <th>Last name</th> <th>Email</th> <th>Password</th> <th>Phone</th> <th>Sxxxy Action</th> <th>Delete Action</th> </tr> </thead> <tbody id="tbody"> </tbody> </table> </div> <script src="JS/jquery-3.2.1.js"></script> <script src="JS/script.js"></script> </body> </html>

。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用jQuery对动态表进行排序 使用自定义表格标签进行动态排序DataTables jQuery jquery DataTables中的动态排序 动态Angular表未排序 带排序的jQuery表 表格排序jQuery 用jQuery对HTML表进行排序 Jquery 表按字母顺序排序，而不是按数字排序 jQuery表排序不适用于图像 jQuery表排序和货币问题
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM