JQuery实战可编辑表格个人笔记

最新推荐文章于 2025-09-28 15:54:23 发布

原创最新推荐文章于 2025-09-28 15:54:23 发布 · 127 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #CSS #JavaScript #HTML #浏览器 #ViewUI

本文介绍使用jQuery实现可编辑表格的方法，包括如何通过选择器选取表格元素、更改样式及响应用户点击事件来切换单元格内容为可编辑状态。文中还涉及了基本的CSS样式设置以确保表格显示效果。

可编辑表格部分
[list]
[*] 可以通过border-collapse: collapse这种方式来使表格中的单元格的边框合并。
[*]$(function(){})是$(document).ready(function(){})的简化写法
[*]$(“tbody tr”)可以返回tbody中的所有tr节点
[*]$(“tbody tr:even”)可以返回tbody中所有索引值是偶数的tr节点
[*]JQuery的对象内容包含着选择器对应的DOM节点，以数组形式保存
[*]get方法可以获得JQuery对象中包含的某一个DOM节点
[*]function中的this代表执行这个function的对象
[*]$()方法的参数是一个DOM对象时，这个方法相当于把DOM对象转换成JQuery对象。
[*]children方法可以获得某个节点的子节点，可以制定参数来限制子节点的内容。
[*]html方法可以设置或获取节点的HTML内容
[*]val方法可以获取或设置节点的value值
[*]$()方法的参数如果是一段正确的HTML文本，则可以创建一个DOM节点，并包装成JQuery对象
[*]trigger方法可以触发某个javascript的事件发生
JQuery中某个事件方法的参数function上可以定义一个event的参数，JQuery会屏蔽浏览器的event差异，传给我们一个可用的event对象
[*]JQuery的event对象上有一个which的属性可以获得键盘按键的键值
[*]13表示回车键，27表示ESC键
[/list]


<style type="text/css">
		table{
		 border: 1px solid black
		 border-collapse:collapse;
		 width:400px;
		 heigth:25px;
		}
		table th{
		background-color:#00FF66;
		border: 1px solid black
		width:200px;
		}
		table td{
		border: 1px solid black		
		width:200px;
		}
	</style>
	<script>
	$(function (){
		var num = $("tbody tr:even")
		num.css("background-color","#CCCF66");
		var numtd= $("tbody td:even")
		numtd.click(function(){
			var tdthis=$(this);
			var text = tdthis.html();
			tdthis.html("");
			var input = $("<input type='text'/>").css("border","0px")
					.css("font-size","16px").width(tdthis.width()).height(tdthis.height())
					.css("background-color",tdthis.css("background-color"))
					.val(text).appendTo(tdthis);
			input.click(function(){
				return false;
			});
			//input.get(0).select();
			input.trigger("focus").trigger("select");
		});
	});
	</script>

<table width="400" border="1" cellspacing="0" cellpadding="0">
  <thead>
  <td colspan="2" align="center">标签点击表格就可以编辑</td>
  </thead>
  <tbody>
	  <tr>
		<th>学好</th>
		<th>姓名</th>
	  </tr>
	  <tr>
		<td width="200px">1001</td>
		<td>李刚</td>
	  </tr>
	  <tr>
		<td width="200px">1002</td>
		<td >张三</td>
	  </tr>
	  <tr>
		<td width="200px">1003</td>
		<td >李四</td>
	  </tr>
	  <tr>
		<td width="200px">1004</td>
		<td >王五</td>
	  </tr>
  </tbody>
</table>