2016-04-03 4 views
0

Я создал сетку цветов с 1 строкой. Теперь я хочу, чтобы мои цвета в сетке отсортировались по этому заказу: «синий», «красный», «зеленый», «желтый», оранжевый "," розовый "," коричневый "," черный " с использованием jquery.Is это возможно ??? Html:Сортировка цветов с помощью jquery

<body style="background-color:#663366"> 
<div class="form-group" > 
<div class="col-sm-5"> 

<table border="5px" width="500px" height="50px" align="center"> 
<tr id="colors"> 
<td height="50px" bgcolor="red"></td> 
<td height="50px" bgcolor="brown"></td> 

<td height="50px" bgcolor="pink" ></td> 
<td height="50px" bgcolor="blue" ></td> 

<td height="50px" bgcolor="black"></td> 
<td height="50px" bgcolor="green"></td> 

<td height="50px" bgcolor="orange" ></td> 
<td height="50px" bgcolor="yellow"></td> 

</tr> 
</table> 

</div> 
</div> 


</body> 

Вот скрипку: https://jsfiddle.net/n6msyp8m/2/

+0

''

+0

Я не знаю, как их использовать! – Preethi

+0

Тогда вам будет слишком рано публиковать здесь, я боюсь. Пожалуйста, попробуйте пройти через различные документы, получить прототип, а затем вернуться и спросить, когда вы застряли. –

ответ

0

Пример:https://jsfiddle.net/n6msyp8m/4/

HTML:

<table border="5px" width="500px" height="50px" align="center"> 
    <tr id="colors"> 
    <td height="50px" orderId="1" bgcolor="red"></td> 
    <td height="50px" orderId="6" bgcolor="brown"></td> 

    <td height="50px" orderId="5" bgcolor="pink" ></td> 
    <td height="50px" orderId="0" bgcolor="blue" ></td> 

    <td height="50px" orderId="7" bgcolor="black"></td> 
    <td height="50px" orderId="2" bgcolor="green"></td> 

    <td height="50px" orderId="4" bgcolor="orange" ></td> 
    <td height="50px" orderId="3" bgcolor="yellow"></td> 
    </tr> 
</table> 

Jquery:

$('tr#colors td').each(function(i){ 
    var elem=$('td[orderId="'+i+'"]'); 
    elem.remove(); 
    $('tr#colors').append(elem); 
}); 
+0

Да, его рабочие благодарности !!! Можете ли вы просто сказать мне, как хранить отсортированные имена цветов в массиве вместе с вашим кодом. – Preethi

+0

@Preethi вы можете использовать **. Map() ** метод ** проверьте это: ** https://jsfiddle.net/n6msyp8m/5/ –

+0

Спасибо! Но моя идея - не отображать отсортированные цвета, а моя цветовая сетка остается прежней, и эти имена цветов будут отсортированы и сохранены в массиве. И тогда, как вы сказали, я могу использовать map(). – Preethi

Смежные вопросы