Initializing
Liveweave
Web
expand_more
home
Home
data_object
CSS Explorer
arrow_outward
Palette
Color Explorer
arrow_outward
Polyline
Graphics Editor
arrow_outward
outbox_alt
Generative AI
arrow_outward
frame_source
Python Playground
New
arrow_outward
build
Tools
expand_more
restart_alt
Load "Hello Weaver!"
post_add
Generate Lorem ipsum...
code
Format HTML
code_blocks
Format CSS
data_object
Format JavaScript
library_add
Library
expand_more
A
Algolia JS
Animate CSS
Apex Charts JS
B
Bulma CSS
Bootstrap
C
Chart JS
Chartist
Create JS
D
D3
Dojo
F
Foundation
Fullpage JS
G
Granim JS
Google Charts
H
Halfmoon
J
jQuery
M
Materialize
Moment JS
Masonry JS
Milligram CSS
P
Pure CSS
Primer CSS
Popper JS
Pattern CSS
Picnic CSS
R
React JS
Raphael JS
Raisin CSS
S
Semantic UI
Skeleton CSS
Spectre CSS
Tachyons CSS
T
Tailwind
Three JS
U
UI Kit
Vis JS
W
Water CSS
download
Download
expand_more
developer_mode
Download as HTML
folder_zip
Download as .ZIP
cloud_upload
Save
account_circle
Login
settings
Settings
expand_more
14
px
Live mode
Night mode
Line number
Mini map
Word wrap
sync_alt
Reset Settings
smart_display
Run
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Formulário</title> <meta name="description" content="Tabela editável com JQuery"> <meta name="keywords" content="Tabela, Teste"> <meta name="author" content="Darabas"> <link rel="stylesheet" href="tabela.css"> <title>Tabela Editável</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="tabela.js"></script> </head> <body> <table id = "tblEditavel"> <input type="hidden" id="metodo" value="tabela-ajax"> <thead> <tr> <td class="id_th id"><b>N</b></td> <th>Nome</th> <th>E-mail</th> <th>Telefone</th> </tr> </thead> <tbody> <tr> <td class="id">1</td> <td title="nome" class="editavel">Name</td> <td title="email" class="editavel">Email</td> <td title="telefone" class="editavel">Phone</td> </tr> <tr> <td class="id">2</td> <td title="nome" class="editavel">Name</td> <td title="email" class="editavel">Email</td> <td title="telefone" class="editavel">Phone</td> </tr> <tr> <td class="id">3</td> <td title="nome" class="editavel">Name</td> <td title="email" class="editavel">Email</td> <td title="telefone" class="editavel">Phone</td> </tr> </tbody> <tfoot> </tfoot> </table> </body> </html>
table td { border-right: 1px solid #D9F8D9; } table{ border-top: 1px solid #D9F8D9; border-left: 1px solid #D9F8D9; } table tr td{ padding: 5px 5px 0px 5px; border-bottom: 1px solid #D9F8D9; } table tr th{ border-bottom: 1px solid #D9F8D9; border-right: 1px solid #D9F8D9; } table td{ width: 200px; height: 25px; } .id{ width: 40px; text-align: center; } .id_th{ color: #555555; }
$(document).ready(function(){ $('#tblEditavel tbody tr td.editavel').dblclick(function(){ if($('td > input').length > 0){ $('#tblEditavel tbody tr td input').focus(); return(false); } var conteudoOriginal = $(this).text(); var novoElemento = $('<input/>', {type: 'text', value: conteudoOriginal, width: '190px', id: 'foco'}); $(this).html(novoElemento.bind('blur, keydown', function(e){ var keyCode = e.which; if(keyCode == 13 && conteudoNovo != '' && conteudoNovo != conteudoOriginal){ var conteudoNovo = $(this).val(); //$(this).parent().html(conteudoNovo); var objeto = $(this); $.ajax({ type: "post", url: "alterar.php", // THIS FILE "VAR_DUMP(data array in the end of page 'index')" dataType: 'html', data: { 'metodo': $('table #metodo').val(), 'id': $(this).parent('tr').children().first().text(), //HERE IS THE "PROBLEM" 'campo': $(this).parent().attr('title'), 'valor': conteudoNovo }, success:function(result){ objeto.parent().html(conteudoNovo); $('body').append(result); } }); } if(keyCode == 27){ // ESC $(this).parent().html(conteudoOriginal); } })); novoElemento.trigger("focus"); $(this).children().select(); }); });