最近做了个项目,其中项目要求:点击表格后可直接编辑,回车或鼠标点击页面其他地方后编辑生效,按esc可取消编辑
1 {3 H, V" ^; }6 v$ O1 ?9 r- ]2个小伙伴给出了2中解决方案,大家来看看哪种更合适呢?1 ^. E7 W" I& }# Z4 l3 v- T3 P
第一种单击表格可以编辑的方法
1 @2 T+ a& T' T' F# }代码如下:
$ m# H# P9 Z ]6 X& {//相当于在页面中的 body标签加上onload事件
|+ [4 Z: v' _8 P4 `: T$(function() {) c3 v# [4 y6 `" ~7 z7 _7 }
//找到所有的td节点! v7 c7 V1 p8 P3 k
var tds = $(td);
. f6 G) R) d+ B3 o" j//给所有的td添加点击事件
) s8 |: d- q a+ B2 ptds.click(function() {
$ u( [$ y) k x//获得当前点击的对象
& |/ o8 M5 P1 c9 \% ^" K1 Yvar td = $(this);
/ V8 T4 s/ e* b- f, v//取出当前td的文本内容保存起来
7 q: ?4 f- x2 S, g' Tvar oldtext = td.text();) q7 ]9 [& F9 c p9 Z! v* d6 F
//建立一个文本框,设置文本框的值为保存的值) j9 b3 E4 y ?- K4 x
var input = $(<input type='text' value=' + oldtext + '/>);: l1 K: e L9 M$ g4 S3 s8 o
//将当前td对象内容设置为input( W5 R$ ^/ t& Y
td.html(input);
9 z2 g3 W7 t) Q. U9 P* H3 O3 }//设置文本框的点击事件失效
2 o% h0 Z' K( @( w) p; sinput.click(function() {
2 B1 n9 P# U/ f7 Q7 a8 k' lreturn false;! w& i- b$ O" G2 C9 ?
});9 M+ p, H/ I! w+ {% [& n! G
//设置文本框的样式+ f# b+ S# X( _0 G* E
input.css(border-width, 0);: G; ^ K$ A: V9 |6 u9 ]
input.css(font-size, 16px);
5 s7 `: m. l* M" F4 b+ ~7 ~input.css(text-align, center);2 C# ^( G d9 x7 |4 A; m# l
//设置文本框宽度等于td的宽度% p8 k) O' [' t/ U$ U
input.width(td.width());2 `7 i7 \8 c* y: g* @3 d/ u
//当文本框得到焦点时触发全选事件
: m- r- ]0 g: N# S, Cinput.trigger(focus).trigger(select);, m$ T; F, N9 }3 Z) c
//当文本框失去焦点时重新变为文本7 @6 z+ j& A# T$ \# |# F" z' u5 j- m5 `
input.blur(function() {
/ E9 c6 a3 j: B7 }" v7 c2 {var input_blur = $(this);2 J0 s& s M- W! q, t3 i c
//保存当前文本框的内容- o1 Q7 ~3 P4 d/ B
var newtext = input_blur.val();3 R' |5 A9 h! j% t2 b/ O- V; ?
td.html(newtext);! G1 f/ J3 j9 [/ l* x7 x1 V2 I, p( V
});# i0 ?$ P% `/ I( T. s- e
//响应键盘事件& h( t( U1 v/ o! Z" i, s
input.keyup(function(event) {
- w( q; E; W- B: k8 T& @+ Q; s! n// 获取键值
6 T. ]3 s6 s: }# B1 }2 Q" ivar keyevent = event || window.event;
0 T& b$ z* |9 g% Dvar key = keyevent.keycode;4 D# W' y B/ F4 ~/ Y, u
//获得当前对象
! Y7 Y9 O5 k/ u0 \: u& ]2 [var input_blur = $(this);
' b6 _! g1 }5 K8 Y* }* cswitch (key)
5 A# G7 T% e) r, T{
4 O% W2 c4 N- O7 d3 o9 f2 \case 13://按下回车键,保存当前文本框的内容
# }/ G O& Y0 R) dvar newtext = input_blur.val();& J/ p& ]3 B' x! b/ M/ @" l
td.html(newtext);
) w: ~' b a7 i* M! b! ?break;
. |" m+ [& C5 q1 C$ f; X0 rcase 27://按下 esc键,取消修改,把文本框变成文本
* K7 w9 u6 j5 Y6 `td.html(oldtext);
- u/ A; T# Z4 e5 U5 cbreak;% e6 Q! b/ l' L! Z9 M
}" i7 |5 E: o2 r9 N$ a3 N* k+ q/ C
});/ W; _* X7 C! p5 q. k( h$ `
});
0 i. n; S) P- N% C' [' I9 b});
1 t. ?) @! `: B0 b" U+ D2 e第二种单击表格可以编辑的方法. y' a; u3 l9 ~0 ^) C9 j
代码如下:8 t% n6 u" ?( x/ @
$(document).ready(function(){
! W2 v* Y0 n3 j% x% gvar tds = $(td);2 r& t/ F, h- l- N# t& q& R
tds.click(tdclick);3 M9 P6 ~5 ?( Z3 A
});) Z( Z6 k' @8 s
function tdclick(){' v( |, e8 F" i2 I9 R" J
var tdnode = $(this);
# M$ X5 L0 ^4 l7 z6 J5 P/ mvar tdtext = tdnode.text();; p5 K% _/ W9 d
tdnode.html();6 l2 M$ B4 y2 y6 l
var input = $(<input>);
7 K* G( P9 f* o1 J, P( ]/ binput.val(tdtext); // input.attr(value,tdtext);! a7 N3 ^0 Z8 I6 O$ I& V
input.keyup(function(event){
" X$ h6 J5 D: F+ @var myevent = event || window.event;1 B+ S! u" d$ H @9 C
var keycode = myevent.keycode;
% A6 a: P! g4 eif(keycode == 13){
2 |# z; h& S% Z* c( Svar inputnode = $(this);
2 ]$ |/ T. s! t; }0 P. B, ]var inputtext = inputnode.val();3 L6 _ V" p5 f) e$ [2 s% k
var td = inputnode.parent();7 v2 U/ |5 Q1 E( q
td.html(inputtext);
- }# U& o2 ~$ f) qtd.click(tdclick);
8 t% ]: x6 ~) i0 ` d- w}
) ^( i9 D4 o8 z2 [; wif(keycode == 27){ //判断是否按下esc键
# }9 w5 u1 V: I4 j) u# {# }1 E- {4 G$(this).parent().html(tdtext);
4 q! P; K; E' U: a0 b$(this).parent().click(tdclick);5 V) U, a& r; Q( m) A
}% _. g9 O: I( d. n3 Z
});
5 h" ?) g0 b! l( L! j9 W4 Ctdnode.append(input);
" U; c7 U% s$ ftdnode.children(input).trigger(select);- F% I* W8 a/ E& z4 Y( q
//输入框失去焦点,所执行的方法
% ?4 v# x# |9 A) C! ]; @- P) tinput.blur(function(){. S! } f7 e: D) L% D/ t
tdnode.html($(this).val());/ f8 @( \$ \& E4 @: G0 o4 X; \
tdnode.click(tdclick);
4 a# x3 d, i3 x7 _/ ~: Y5 r});2 ~/ _9 N, }5 K, I" N* Y& O
tdnode.unbind(click);
: u! J3 g6 ^; N x w}
9 z+ `7 K2 B8 }+ A; w/ L9 U$ ^想比较来说,个人更喜欢第二种一些,小伙伴们是什么意见呢,欢迎留言给我。& p2 b+ |0 W3 Z
2 S" F. W% }- [/ z+ u p2 D( H更多网页制作信息请查看: 网页制作 |
|