js 实现可编辑表格

最新推荐文章于 2023-12-08 09:00:00 发布

hehewjt

最新推荐文章于 2023-12-08 09:00:00 发布

阅读量578

点赞数

分类专栏： javascript 文章标签： input callback border function 浏览器 java

本文链接：https://blog.csdn.net/hehewjt/article/details/8005117

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!-- 解决思路，当表格当前的td被双击时，得到当前的值，然后清空，再定制一个input，

将input渲染到td内，当该td失去焦点时，移除input，将input的值赋给td -->

<html>
	<head>
		<title>test</title>
		<style>
			table td{
				border:1px solid red;
				width:100px;
				text-align:center;
				padding:3px 5px
			}
		</style>
		<script type="text/javascript">
			function editContent(node){
				if(!node.onEdit || node.onEdit != 'true') {
					var initValue = node.innerHTML;
					var input = document.createElement('input');
					input.type='text';
					input.value = initValue;
					input.style.width = node.clientWidth - 10;
					input.style.height = node.clientHeight - 6;
					node.innerHTML = '';
					node.appendChild(input);
					addEvent(input,callBackFunc);
					node.onEdit = 'true';
					input.select();
					input.focus();
				}
			}
			function callBackFunc() {
				var parentNd = this.parentNode;
				parentNd.innerHTML = this.value;
				parentNd.onEdit = 'false';
			}
			
			function addEvent(obj,callBack) {
				if (obj.addEventListener) {
					obj.addEventListener('blur',callBack,false);
				} else if (obj.attachEvent) {
					obj.onblur = callBack;
				} else {
					alert('无法识别浏览器');
				}
			}
			
		</script>
	</head>
	<body>
		<div>
			<table style="border:1px solid red;border-spacing:0;border-collapse:collapse">
				<thead>
					<tr>
						<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
					</tr>
				</thead>
				<tbody id="tbody11">
					<tr>
						<td οndblclick="editContent(this)">11</td>
						<td οndblclick="editContent(this)">21</td>
						<td οndblclick="editContent(this)">31</td>
						<td>41</td>
						<td>51</td>
						<td>61</td>
					</tr>
					<tr>
						<td>12</td>
						<td>22</td>
						<td>32</td>
						<td>42</td>
						<td>52</td>
						<td>62</td>
					</tr>
				<tbody>
			</table>
		</div>
	</body>
</html>

备注：js中有两个函数，名字相同参数不同，当调用的时候怎么区分？

答案：js不像java有方法重载，js的方法顺序加载，后面的会把前面的方法覆盖，永远只有后面的那个方法会被执行。另外，js不区分参数个数的，调用时参数少了按顺序匹配，多了多余的无用。

hehewjt

关注

0
点赞
踩
1

收藏

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

将input渲染到td内，当该td失去焦点时，移除input，将input的值赋给td --> test table td{ border:1px solid red; width:100px; text-align:center; padding:3px 5px } function editContent(
复制链接

扫一扫

专栏目录