可编辑表格实现

最近做的项目中，需要用到可编辑表格，逻辑很简单，即通过双击将表格的td元素变为input，下面是实现：

首先是HTML代码，这个td为啥要自定义一个value，稍后解释

<table>
    <tbody>
      <tr>
        <td value="0.00">0.00</td>
      </tr>
    </tbody>
  </table>

接下来是js代码（项目里用的jquery）

$(".table").on("dblclick","td", function () {
  /* 1.先拿到这个td原来的值，然后将这个td添加一个input:text,并且原来的值不动 */
  var tdVal = $(this).attr("value");
  var initVal = "0.00";
  var inputVal;//输入数据
  var oInput = $("<input class='inputStyle' type='text'/>");
  oInput.val(tdVal);
  $(this).html(oInput);
  oInput.focus();
  /* 2.失去焦点，这个td变为原来的text，value为修改过后的value */
  oInput.blur(function () {
    inputVal = $(this).val() == "" ? tdVal : $(this).val();//输入为空时值变为零
    $(this).parent().removeClass("inputWrong");//inputWrong
    //对输入值进行校验，只能输入数字，若输入不合法，则输入框置红，不下发数据

      var regNum = /^(-|\+)?\d+(\.\d+)?$/

    if (!regNum.test(inputVal)) { 
      $(this).parent().addClass("inputWrong").focus().blur().select();
      return false;
    } else {

       $(this).parent().removeClass("inputWrong").attr("value", inputVal).html(inputVal);

    }
    //数据下发操作等
  });
});

双击td后，将input插入td,然后将td原本的值赋给input。

为什么不直接用text值而要用value呢？因为td的text在点击后被input覆盖了，而value属性在点击后不会发生变化，因此input可以显示原先的值；

 **************************************************************************************************************************************************************************

可编辑表格改进方法：

直接内嵌input，然后将input设置disabled，编辑时移除disabled属性，失焦后再恢复disabled。

这样写可以解决一个交互上的缺陷：单击时选中行背景色改变，再点击一次可编辑；