<tr> 태그를 "이름"값으로 정렬합니다.

Question

태그 이름 속성 값으로 tr 태그를 정렬해야합니다.

이 경우 sort 메서드를 사용할 수 있습니까?

아니면 다른 방법이 있습니까?

내 정렬 기능은

처음에는 입력 값을 복용하고 부모() 이름 ATTR에 appendig있어 코드

의 아래쪽에 있습니다. 값 그 후에 나는 atts라는 이름으로 알파벳 순서로 배열을 정렬해야한다. 값. 당신은 당신의 데이터 테이블을 정렬하려면 다음 코드를 사용할 수 있습니다

$(function() { 
    var tableHead = 
     "<table>" + 
     "<tr>" + 
     "<th class='sort'>Id <span class='downArrow'>&darr;</span>&nbsp;&nbsp;<span class='upArrow'>&uarr;</span></th>" + 
     "<th id='sort_name'>Name sort</th>" + 
     "<th>Surname</th>" + 
     "<th>Birthday</th>" + 
     "<th>Filter</th>" + 
     "<th class='addList'>+</th>" + 
     "</tr>" + 
     "</table>"; 

    $('body').html(tableHead); 
    var inputName = "<input type='text' class='name' placeholder='First name'>"; 
    var inputSurname = "<input type='text' class='surname' placeholder='Surname'>"; 
    var bDayDate = "<input type='date' class='bDayDate' placeholder='Bday'>"; 
    var addList = $('.addList'); 
    var downArrow = $(".downArrow"); 
    var upArrow = $(".upArrow"); 
    var idNum = 0; 
    var arrNum = []; 
    var nameArr = []; 
    var sortedNameArr = []; 
    var sortedArr = []; 
    addList.on("click", function() { 
    idNum++; 
    var tr = $("<tr></tr>"); 
    for (var i = 1; i <= 6; i++) { 
     var td = $('<td></td>'); 
     tr.addClass("" + idNum); 
     switch (i) { 
     case 1: 
      td.addClass("" + idNum); 
      td.html(idNum); 
      break; 
     case 2: 
      td.html(inputName); 
      break; 
     case 3: 
      td.html(inputSurname); 
      break; 
     case 4: 
      td.html(bDayDate); 
      break; 
     case 5: 
      td.html(1); 
      break; 
     case 6: 
      td.html("Delete"); 
      td.addClass('delete'); 
      break; 
     default: 
      return console.log("OooPs!!"); 
     } 
     tr.append(td); 
    } 
    arrNum.push(tr); 
    $('table').append(arrNum); 

    $('.delete').on("click", function() { 
     removeItem(this, arrNum, sortedArr); 
    }); 

    for (var j = arrNum.length; j >= 0; j--) { 
     sortedArr.push(arrNum[j]); 
    } 

    downArrow.on("click", function() { 
     $('table').append(sortedArr); 
     $('.delete').on("click", function() { 
     $(this).parent().remove(); 
     }); 
    }); 

    upArrow.on("click", function() { 
     $('table').append(arrNum); 
    }); 


    function removeItem(item, arr, sArr) { 
     var that = $(item).parent(); 
     $(item).parent().remove(); 

     for (var k = 0; k < arr.length; k++) { 
     if (arr[k] && that[0] === arr[k][0]) { 
      arr.splice(k, 1); 
     } else { 
      // console.log(that[0]); 
      // console.log(arr[k][0]) 
     } 
     } 

     // If you want delete when sort the table 
     for (var k = 0; k < sArr.length; k++) { 
     if (sArr[k] && that[0] === sArr[k][0]) { 
      sArr.splice(k, 1); 
     } else { 
      // console.log("wrong!!") 
     } 
     } 
    } 

    }); 

    $("#sort_name").on("click", function() { 
    var name = $(".name"); 

    for (var n = 0; n < arrNum.length; n++) { 
     var trName = arrNum[n][0]; 
     $(trName).attr("name", $(name[n]).val()); 
     nameArr.push(trName); 
     // console.log(nameArr[n]) 
    } 
    nameArr.sort(); 
    for (var n = 0; n < arrNum.length; n++) { 
     console.log(nameArr[n]) 
    } 

    }); 
}); 

Answer 1

당신이 원하는 필드와 함수 호출을 따를 때처럼 배열 클릭 이벤트에 전화를 관리 할 수 ​​있습니다.

function sortTable(table, order) { 
    var asc = order === 'asc', 
     tbody = table.find('tbody'); 

    tbody.find('tr').sort(function(a, b) { 
     if (asc) { 
      return $('td:first', a).text().localeCompare($('td:first', b).text()); 
     } else { 
      return $('td:first', b).text().localeCompare($('td:first', a).text()); 
     } 
    }).appendTo(tbody); 
} 
could be called on any table like this ther your table may be very by selector. 

sortTable($('#mytable'),'asc'); 
sortTable($('#mytable'),'desc');