Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Salve Imaster..
Bom eu to aprendendo javascript(jquery).. so bem fraquinho mesmo..
Seguinte, tenho um script que me possibilita editar campos da Tabela (faze um update..). Ate ai tudo bem.
Funciona legal adcionei o Ajax pra faze a requisição e tals..
Porem me surgiu a ideia de que em uma coluna da tabela eu preciso de um input SELECT ,onde pegaria dados de um json..
ai que a porca torceu o rabo pro meu lado =X
possoal mais fera no jquery conserteza tira isso de letra. Vim pedir essa pequena ajuda..
segue o script e bem simples .
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<title></title>
</head>
<body>
<table border="0" style="width: 99%" class="sample" id="tabledit">
<caption>
<span>Itens Por Pagina:</span><input type="text" size="15" value="10" name="p">
</caption>
<thead>
<tr>
<th></th>
<th style="display: none">ID</th>
<th>Imagem</th>
<th>Descricao</th>
<th>Galeria</th>
<th class="edit"> </th></tr>
</thead>
<tbody>
<tr>
<td class="edit"><input type="checkbox" value="4" name="4"></td>
<td style="display:none">4</td>
<td>imagem002.jpg</td>
<td>esse e a 2 imagem</td>
<td>5</td>
<tr>
<td class="edit"><input type="checkbox" value="5" name="5"></td>
<td style="display: none;">5</td>
<td>asdasdasda</td>
<td>fgdfgdfgdfgdfg</td>
<td>1</td>
<tr>
<td class="edit"><input type="checkbox" value="6" name="6"></td>
<td style="display:none">6</td>
<td>dfgdfgdfgdfg</td>
<td>dfgdfgdfgdfgdfgdfgdfg</td>
<td>2</td>
<tr>
<td class="edit"><input type="checkbox" value="7" name="7"></td>
<td style="display:none">7</td>
<td>sdfsdfsdfsdfs</td>
<td>sdfsdfsdfsdf</td>
<td>2</td>
</tbody>
</table>
</body>
<script type="text/javascript">
$(function(){
TABLE.formwork('#tabledit');
});
var TABLE = {};
TABLE.formwork = function(table){
var $tables = $(table);
$tables.each(function () {
var _table = $(this);
_table.find('thead tr').append($('<th class="edit"> </th>'));
_table.find('tbody tr').append($('<td class="edit"><input class="button" type="button" value="Edit"/></td>'))
});
$tables.find('.edit :button').live('click', function(e) {
TABLE.editable(this);
e.preventDefault();
});
}
TABLE.editable = function(button) {
var $button = $(button);
var $row = $button.parents('tbody tr');
var $cells = $row.children('td').not('.edit');
var $array = [];
if($row.data('flag')) { // in edit mode, move back to table
// cell methods
$cells.each(function () {
var _cell = $(this);
var ar = _cell.html(_cell.find('input').val());
$array.push(ar.text());
});
$row.data('flag',false);
$button.val('Edit');
//salvando dados
$.ajax({
url:"exemplo.html",
data:{data:$array},
type:'POST',
dataType:'json'
}).done(success());
}
else {
// in table mode, move to edit mode
// cell methods
$cells.each(function() {
var _cell = $(this);
_cell.data('text', _cell.html()).html('');
var $input = $('<input type="text" />')
.val(_cell.data('text'))
.width(_cell.width() - 15);
_cell.append($input);
})
$row.data('flag', true);
$button.val('Save');
}
}
function success(){
alert("Sucesso no editar!");
}
</script>
</html>desde já agradeço!
eu sei..
Mais eu tenho que faze o script que cria os campos editaveis renderiza um SELECT qndo clica em edit.. ele renderiza apenas inputs texts
essa e minha dificuldade.
faz um teste no codigo pra você ve.. e so roda em html msm q funciona.
hum..
queria implementa oque já tenho.. Faz o mesmo so que apenas pra input text..
bom vou da uma olhada nesse plugin!
ve se pego a ideia dele de renderiza o SELECT..
adicionar nesse trecho do código..
$cells.each(function() {
var _cell = $(this);
_cell.data('text', _cell.html()).html('');//ele faz o input text
//mais quero em um <td id='select'>, renderize um input select
var $input = $('<input type="text" />')
.val(_cell.data('text'))
.width(_cell.width() - 15);
_cell.append($input);vlw
Espero ter ajudado.
Luis Paullo,
retorne um array com dados do input select via json.