前端:JS实现双击table单元格变为可编辑状态
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns= "http://www.w3.org/1999/xhtml" >
< head>
< title> JS实现双击table单元格变为可编辑状态< / title>
< meta http- equiv= "content-type" content= "text/html;charset=utf-8" / >
< script type= "text/javascript" >
function Show ( element) {
var oldhtml = element. innerHTML;
if ( oldhtml == null || oldhtml. length == 0 ) {
return alert ( "不能为空!" ) ;
}
var newInput = document. createElement ( 'input' ) ;
newInput. type = 'text' ;
newInput. value = oldhtml;
newInput. onblur = function ( ) {
element. innerHTML = this . value == oldhtml ? oldhtml : this . value;
}
element. innerHTML = '' ;
element. appendChild ( newInput) ;
newInput. setSelectionRange ( 0 , oldhtml. length) ;
newInput. focus ( ) ;
}
< / script>
< / head>
< body>
< table class = "sui-table table-bordered" >
< thead>
< tr>
< th width= "20%" > 队列大小< / th>
< th width= "20%" > 速率< / th>
< tr>
< / thead>
< tbody>
< tr>
< td ondblclick= "Show(this)" > < span> 111 < / span> < / td>
< td> < span ondblclick= "Show(this)" > 222 < / span> < / td>
< / tr>
< / tbody>
< / table>
< / body>
< / html>