Table编辑事件

开发工具与关键技术： HTML5, JavaScript
作者：张鱼
撰写时间：2019 年 4月 6日
1、 table编辑事件是通过双击table的td，然后对td进行编辑，方便了修改表格内容。

（1） 首先创建好一个table，在table里嵌入tr，th，td等行以及列元素；代码如下：

   <table class="table table-bordered">
              <tr>
                  <th>姓名</th>
                  <th>性别</th>
                  <th>电话</th>
                  <th>工资</th>
              </tr>
              <tr>
                  <td>张三</td>
                  <td>男</td>
                  <td>178784546</td>
                  <td>30000</td>
              </tr>
              <tr>
                  <td>李四</td>
                  <td>男</td>
                  <td>1255664535</td>
                  <td>5000</td>
              </tr>
          </table>

我这里引用了bootstrap插件里的table样式，所以才有table，和tableborder类
（2） 其次就是写js代码，我是用jQuery方法写的，因为jQuery简略了代码的书写，所以这种写法需要引入jQuery插件。Js的代码如下：

//td 的双击事件双击进入编辑状态
        $("td").dblclick(function () {
            var historytext = $(this).text();//获取原文本值
            $(this).text("");//清空文本值
            $(this).append("<input type='text'/>")//向清空文本的td追加一个input标签
            $("input").blur(function () { //鼠标焦点离开input时触发该事件
                if ($(this).val() == "") {//判断当前的input值是否为空，为空则移除input
                    $(this).remove();//移除当前input
                    $(this).text(historytext);//给td返回原先的值
                } else {
                    $(this).closest("td").text($(this).val()); // 否则返回当前的input的val值到td里
                }
             })
        })

这种方法代码量少而且比较简单，下面看看效果吧!双击td单元格就可以在input内写入内容，然后当鼠标焦点离开input时就可以把你编辑的值重新赋值到td中了，如果你双击后没有输入值，它会返回空文本，就像下图：
这是双击进入编辑状态
不输入返回的结果为空，在input中有输入值则返回当前输入值