相信这个功能对于很多同学都是很简单的了，但是对于我这个自称全栈的同学来说，还是值得做个笔记的，方便以后直接copy代码。
这里就直接放代码了
下面是有两种双击单元格的情况，可以自行选择使用。
<!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>
有借鉴网上的。
