jQuery之可编辑表格的实现

原创于 2012-01-24 16:18:48 发布 · 317 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #table #safari #input

jQuery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种利用jQuery简化表格数据编辑的方法，通过点击表格单元格触发输入框弹出，实现数据的实时修改和保存。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(document).ready(function(){

$('table tr:even').css('background-color', '#ECE9D8');
$('table tr:first').css('background-color', '#A3BAE9');

$('table td').click(function(){

var tdNode = $(this);
if(tdNode.children('input').length>0)
return false;

var inputNode = $('<input type="text" />');
inputNode.css('border-width', '0').css('width', tdNode.width()).css('background-color', tdNode.css('background-color')).css('font-size', '18');
var srcText = tdNode.html();
inputNode.val(srcText);
tdNode.html('');
tdNode.append(inputNode);

/*safari should firstly get the focus*/
inputNode.trigger('focus').trigger('select');

inputNode.keyup(function(event){
var keycode = event.which;
if(keycode==13)//enter
tdNode.html(inputNode.val());
else if(keycode==27)//esc
tdNode.html(srcText);
});

inputNode.blur(function(){
tdNode.html(srcText);
});

});
});