javascript将table的td变为可编辑的input，实现表格动态编辑

  很多场景都会遇到再网页上，用户喜欢像用excel一样，直接对html的table内容进行操作，所以写了个方便使用的插件

  csdn下载地址 :http://download.csdn.net/detail/w172087242/9589681

  升级版下载地址

CSDN有示例版博客地址

 

下面是javascript代码：

  

 

/***
  *  功能：将只读表格变成可编辑表格
  *  支持自定义事件进行编辑
  *  表格样式可以自己设置
  *  只负责tbody部分
  *  data结构样式如下:     {rows:3, data:[{name:"littlehow", age:18},{...}], column:["name", "age"]}
  *  @author littlehow
  *  @time 2016/7/29 星期五
  **/
(function() {
	var $ = function(node) {
		return typeof node == "string" ? document.getElementById(node) : node;
	}
	var $1 = function(node, parent){
		var nd = document.createElement(node);
		if(parent) parent.appendChild(nd);
		return nd;
	}
	/** 绑定事件流 */
	var bind = function(obj, eventName, funcionName){
		if(obj.addEventListener){
			obj.addEventListener(eventName, funcionName,false);
		 }else if(obj.attachEvent) {
			obj.attachEvent("on" + eventName, funcionName);
		 }else{
			obj["on" + eventName] = funcionName;
		 }
	};

	var fulltable = function(tbody, data){
		var pd = data.data;
		var column = data.column;
		for(var i=0, len=data.rows; i 0) return;
			var v = this.innerHTML;
			this.innerHTML = "";
			var input = $1("input", this);
			input.type = "text";
			input.value = v;
			input.focus();//光标聚集
			bind(input, "blur", blur);
		}
		var blur = function(){
			var v = this.value;
			this.parentNode.innerHTML = v;
		}
	}
	window.$$ = function(id, ev){
		return new littlehow_edit_table(id, ev);
	};
})()

如果想要调用，可以去下载频道下载。