정렬 테이블 행 JQuery와

Question

을이 제는 FIDDLE

<table> 
    <tr> 
     <td> 
      <div style="background:blue;color:white">hello</div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <div style="background:pink;color:white">hello</div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <div style="background:blue;color:white">hello</div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <div style="background:green;color:white">hello</div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <div style="background:pink;color:white">hello</div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <div style="background:green;color:white">hello</div> 
     </td> 
    </tr> 
</table> 

은 어떻게 색상을 기반으로 HTML 테이블 행을 재 배열 할됩니다 사용하고 계십니까? 행의 배경색에 따라 html 테이블 행을 그룹화하고 싶습니다.

Answer 1

sort()을 tr 요소의 정렬 배열에 사용하십시오. 모든 요소의 소트 및 배치의 기능으로서, 요소의 backgroud-color을 취득 할 수 있습니다.

$("table tr").sort(function (a, b){ 
 
    return $("div", b).css("background") < $("div", a).css("background") ? 1 : -1;  
 
}).appendTo('table');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
     <td> 
 
      <div style="background:blue">hello</div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <div style="background:pink">hello</div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <div style="background:blue">hello</div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <div style="background:green">hello</div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <div style="background:pink">hello</div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <div style="background:green">hello</div> 
 
     </td> 
 
    </tr> 
 
</table>

Answer 2

당신은 쉽게 자바 스크립트에서 할 수 있습니다.

1. 테이블의 모든 요소 (TR 소자)를 통해 var colorRowmap = {}
2. 루프 같은 빈 JS 객체를 초기화하고, 각 TR에서 colorName을 얻는다. 그리고 해당 색상이 colorRowMap 객체의 키로 존재하지 않는 경우 colorRowMap[colorName] = [currentTableRow] else do colorRowMap[colorName] = colorRowMap[colorName].push(currentTableRow)
3. 표를 비 웁니다.
4. colorRowMap의 모든 키를 반복하고 tr 행을 테이블로 푸시합니다.

완료. :)

Answer 3

나는 당신의 질문을 검토했다, 당신은 여기에 HTML로, 스타일과 스크립트를 추가하여 각 tr 여기에 차별화하려는 생각합니다.

여기에 모든 TR 고유 수업을합니다이 기능에 의해,이 스크립트를 추가 마십시오 HTML을

<table> 
    </tbody> 
     <tr><td>123</td></tr> 
     <tr><td>123</td></tr> 
     <tr><td>123</td></tr> 
     <tr><td>123</td></tr> 
     <tr><td>123</td></tr> 
    </table> 

입니다. 당신은 여기이 도움이 될 것입니다 각 테이블 행 TR

<style> 
.color1{background-color:orange;} 
.color2{background-color:teal;} 
.color3{background-color:red;} 
.color4{background-color:#717171;} 
.color5{background-color:khaki;} 
.color6{background-color:lightgray;} 
tr, table, body{width:100%;} 
</style> 

희망의 배경 색상의 스타일은

<script> 
// please do add jQuery file to prevent error 
function adddClass() { 
     for(i=1; i<=6; i++) { 
      alert(""); 
      jQuery('table tr:nth-child('+ i +')').addClass("color"+i); 
     } 
    } 
    adddClass(); 
    </script> 

클래스

의 기초에 거기에 배경 색상 등 스타일을 추가 할 수 있습니다, 감사합니다.!