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

最新推荐文章于 2025-03-25 22:26:41 发布

little_how

最新推荐文章于 2025-03-25 22:26:41 发布

阅读量2.3w

点赞数 3

分类专栏： javascript 文章标签： javascript json table input 可编辑

本文链接：https://blog.youkuaiyun.com/w172087242/article/details/52062955

版权

javascript 专栏收录该内容

15 篇文章

订阅专栏

介绍了一款将HTML表格转换为可编辑表格的JavaScript插件，支持自定义事件触发编辑功能，并提供了完整的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

升级版下载地址

优快云有示例版博客地址

下面是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<len; i++){
			var tr = $1("tr", tbody);
			var cd = pd[i];
			for(var j=0,jlen=column.length; j<jlen; j++){
				var td = $1("td", tr);
				td.innerHTML = cd[column[j]];//innerText不兼容火狐，可以自己写innerText和textContent的兼容，这里就直接用innerHTML了
			}
		}
	}
	var littlehow_edit_table = function(tbody, ev){
		this.tbody = $(tbody);
		this.event = ev ? ev : "click";//默认为单机事件
		this.init = function(data) {//data可以是undefined
			if(data) {
				fulltable(this.tbody, data);
			}
			//调用可编辑
			this.edit();
		}
		this.edit = function(){
			var tds = this.tbody.getElementsByTagName("td");
			for(var i=0,len=tds.length; i<len; i++){
				bind(tds[i], this.event, this.click);
			}
		}
		this.click = function(){
			//alert(this.children.length);
			if(this.children.length > 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);
	};
})()

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