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

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

可以通过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的event对象上有一个which的属性可以获得键盘按键的键值
13表示回车键，27表示ESC键

<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>

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

相关推荐