javascript实现可编辑表格

最新推荐文章于 2023-12-14 14:58:12 发布

S117

最新推荐文章于 2023-12-14 14:58:12 发布

阅读量699

点赞数

分类专栏： javascript学习笔记

本文链接：https://blog.csdn.net/longtian1213/article/details/8500754

版权

javascript学习笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

在做前端页面时，经常会遇到要用到可编辑表格的需求，网上有很多的JS插件可以实现这个功能，其原理一般就是，在双击/单击的时候，获取事件发生的节点，然后生成一个input输入框，当input失去焦点的时候，再生成一个文本节点，替换掉原来的input输入框，根据这个原理，自己试着写了一个demo玩玩

首先是js代码：

(
	function(){
		var table = null;
		/**
		 *构造函数 
		 */
		Edit = function(id){
			table = $(id);
			if(table){
				for(var i = 0 ;i < table.rows.length ; i++){
					for(var j = 0 ;j < table.rows[i].cells.length ; j++){
						var td = table.rows[i].cells[j];
						addEvent(td,"dblclick",replaceTd);
					}
				}
			}
		}
		/**
		 *添加事件函数 
		 */
		var addEvent = function(node,e,callback){
			if(node.addEventListener){
				node.addEventListener(e,callback,false);
			}else if(node.attachEvent){
				node.attachEvent("on" + e ,callback);
			}else{
				node["on" + e] = callback;
			}
		}
		/**
		 *获取table 
		 */
		var $ = function(id){
			if(typeof id == 'string'){
				return document.getElementById(id);
			}
		}
		/**
		 *双击时，生成input替换td的文本节点 
		 */
		var replaceTd = function(event){
			var target = getTarget(event);
			var width = target.offsetWidth;
			var height = target.offsetHeight;
			var value = target.innerHTML;
			var input = document.createElement("input");
			addEvent(input,"blur",onblur);
			input.style.width = width;
			input.style.height = height;
			input.style.border = 0 + "px";
			input.value = value;
			var child = target.childNodes[0];
			target.replaceChild(input,child);
			target.style.width= width;
			selectText(input,0,value.length);
			child = null;
		}
		/**
		 * 当input输入框失去焦点时，
		 * 将input的值生成文本节点替换input
		 * 这里可以定义AJAX方法，将值传到后台
		 */
		var onblur = function(event){
			var target = getTarget(event);
			var value = target.value;
			var text = document.createTextNode(value);
			target.parentNode.replaceChild(text,target);
			target = null;
		}
		/**
		 * 获取事件发生节点
 		 * @param {Object} event
		 */
		var getTarget = function(event){
			event = event || window.event;
			return event.target || event.srcElement;
		}
		/**
		 * 设置input选择文本
		 * @param {Object} textbox
		 * @param {Object} startIndex
		 * @param {Object} stopIndex
		 */
		function selectText(textbox, startIndex, stopIndex) {
		    if (textbox.setSelectionRange) {
		        textbox.setSelectionRange(startIndex, stopIndex);
		    } else if (textbox.createTextRange) {
		        var range = textbox.createTextRange();
		        range.collapse(true);
		        range.moveStart("character", startIndex);
		        range.moveEnd("character", stopIndex - startIndex);
		        range.select();
		    }
		    textbox.focus();
		}		
	}
)();

HTML页面：

<HTML>
	<HEAD>
		<TITLE>edit table</TITLE>
		<META http-equiv=Content-Type content="text/html; charset=utf-8">
		<script src="Edit.js"></script>
	</HEAD>
	<BODY>
		<table width="100%" border="1" id="editTabe">
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>4</td>
				<td>5</td>
				<td>6</td>
			</tr>
			<tr>
				<td>7</td>
				<td>8</td>
				<td>9</td>
			</tr>				
		</table>
	</BODY>
	<script type="text/javascript">
		var Edit = new Edit("editTabe");
		
	</script>
</HTML>

S117

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript实现可编辑表格

在做前端页面时，经常会遇到要用到可编辑表格的需求，网上有很多的JS插件可以实现这个功能，其原理一般就是，在双击/单击的时候，获取事件发生的节点，然后生成一个input输入框，当input失去焦点的时候，再生成一个文本节点，替换掉原来的input输入框，根据这个原理，自己试着写了一个demo玩玩首先是js代码：( function(){ var table = null; /**
复制链接

扫一扫

专栏目录