Необходимо по нажатию клавиши Фигура отображать css и class name конкретного элемента. В текущей реализации не могу получить данные о стилях конкретного div.
Пример кода:
$(document).ready(function() {
$("#add").click(function() {
$("#myTable").find('tbody')
.append($('<tr>')
.append($('<td>')
.append($("<div>")
.attr({
'class': $("#figure :selected").val(),
})
.css({
"background-color": $("#colour :selected").val(),
}))
)
.append($('<td>')
.append($('<button>Удалить</button>')
.click(function(e){
e.preventDefault();
$(this).parent().parent().remove()
}))
)
.append($('<td>')
.append($('<button>Фигура</button>')
.click(function(e){
e.preventDefault();
console.log($(this).parent().parent().children('td').children('div'))
}))
)
)
});
$("#hide").click(function(){
var clas = $("#figure :selected").val();
var color = $("#colour :selected").val();
var row = $('div').filter(function() {
var color1 = $(this).css("background-color");
var clas1 = $(this).attr('class')
return color1 === color && clas1 === clas
})
row.parent().parent().hide()
});
$("#show").click(function(){
var clas = $("#figure :selected").val();
var color = $("#colour :selected").val();
var row = $('div').filter(function() {
var color1 = $(this).css("background-color");
var clas1 = $(this).attr('class')
return color1 === color && clas1 === clas
})
row.parent().parent().show()
});
})
.square {
width: 50px;
height: 50px;
margin: 10px auto;
margin-left: 10px;
}
.circle {
width: 50px;
height: 50px;
margin: 10px auto;
margin-left: 10px;
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div>
<select id="colour">
<option selected>Список с цветами</option>
<option value="rgb(255, 0, 0)">Красный</option>
<option value="rgb(0, 128, 0)">Зеленый</option>
<option value="rgb(0, 0, 255)">Синий</option>
</select>
<button type="button" id="add">Добавить фигуру</button>
<button type="button" id="hide">Скрыть фигуры</button>
<button type="button" id="show">Показать фигуры</button>
</div>
<div>
<select id="figure">
<option selected>Список с фигурами</option>
<option value="circle">Круг</option>
<option value="square">Квадрат</option>
</select>
<button type="button" id="sort_name">Сортировать по цвету А-Я</button>
<button type="button" id="sort_name">Сортировать по фигуре А-Я</button>
</div>
<div>
<table id="myTable">
<tbody>
</tbody>
</table>
</div>
alert
?