<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<style>
#imagesList {
display: inline-block;
}
#imagesList img{
cursor: pointer;
margin-right: 10px;
margin-bottom: 5px;
}
#tableList {
border: solid 1px #CCC;
padding: 5px;
}
.border {
position: relative;
border-bottom: solid 4px #FF0088;
}
.id{
min-width: 20px;
}
.image{
min-width: 120px;
}
.description{
min-width: 280px;
}
.value{
min-width: 200px;
}
.actions{
min-width: 100px;
}
</style>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
var checkImage = function checkImage(id) {
$('#'+id).addClass('border');
}
var UncheckImage = function UncheckImage(id) {
$('#'+id).removeClass('border');
$('#'+id+'-tr').hide();
}
$(function(){
//$("#tableList").hide();
//load image array
var images = [
{'image':'http://placehold.it/102x102', 'id' : '1'},
{'image':'http://placehold.it/102x102', 'id' : '2'},
{'image':'http://placehold.it/102x102', 'id' : '3'},
{'image':'http://placehold.it/102x102', 'id' : '4'},
{'image':'http://placehold.it/102x102', 'id' : '5'},
{'image':'http://placehold.it/102x102', 'id' : '6'},
{'image':'http://placehold.it/102x102', 'id' : '7'}
];
$.each(images, function(){
var self = this;
$('#imagesList').append('<img src="' + this.image + '" id="' + this.id + '"/>');
$('#'+this.id).one("click", function(){
$('#tableList').show();
$('#tableList').append(
'<tr id='+self.id+'-tr>'
+ '<td> ' + self.id + ' </td>'
+ '<td><img src="' + self.image + '" id="' + self.id + '"/></td>'
+ '<td><textarea rows="6" cols="35"/></td>'
+ '<td><select><option>CPF</option><option>RG</option><option>CHN</option><option>Comprovante de residência</option></select></td>'
+ '<td><input type="button" id="check" onclick="checkImage('+self.id+');" value="Check"/></td>'
+ '<td><input type="button" id="remove" onclick="UncheckImage('+self.id+');" value="Remove"/></td>'
+ '</tr>'
);
});
});
});
</script>
<div id="imagesList"></div>
<table id="tableList">
<tr>
<td class="id">ID</td>
<td class="image">Imagem</td>
<td class="description">Descrição</td>
<td class="value">Tipo</td>
<td class="actions" colspan="2">Ações</td>
</tr>
</table>
</body>
</html>
2 Responses
Write a comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.