jquery学习之 可编辑的单元格

 第一千零三十六章 考验

html代码

 

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>jquery-EditTable.jsp</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" type="text/css" href="../css/edittable.css">
	<script type="text/javascript" src="../js/jquery.js"></script>
	<script type="text/javascript" src="../js/edittable.js"></script>
  </head>
  
  <body>
    <table>
    	<thead>
    		<tr>
    			<th colspan="2">鼠标点击可以编辑表格</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<th>姓名</th>
    			<th>学号</th>
    		</tr>
    		<tr>
    			<td>123</td>
    			<td>张三</td>
    		</tr>
    		<tr>
    			<td>456</td>
    			<td>李四</td>
    		</tr>
    		<tr>
    			<td>456</td>
    			<td>王五</td>
    		</tr>
    		<tr>
    			<td>456</td>
    			<td>赵六</td>
    		</tr>
    	</tbody>
    </table>
  </body>
</html>

 

JS

 

$(function(){
	$("tbody tr:even").css("background-color","#369456");
	
	var numTd=$("tbody td:even");
	numTd.click(function(){
		var tdObj=$(this);
		if(tdObj.children("input").length>0){
			return false;
		}
		var text=tdObj.html();
		var inputObj=$("<input type='text' />");
		inputObj.css("border-width","0");
		inputObj.css("font-size","16px");
		
		inputObj.width(tdObj.width());
		inputObj.val(tdObj.html());
		inputObj.css("background-color",tdObj.css("background-color"));
		tdObj.html("");
		inputObj.appendTo(tdObj);
		//inputObj.get(0).select();
		inputObj.trigger("focus").trigger("select");
		inputObj.click(function(){
			return false;
		});
		inputObj.keyup(function(event){
			var keycode=event.which;
			if(keycode==13){
				var inputValue=$(this).val();
				tdObj.html(inputValue);
			}
			if(keycode==27){
				tdObj.html(text);
			}
		});
	});
});

 CSS代码

 

@CHARSET "UTF-8";

table{
	border:1px solid black;
	border-collapse:collapse;
	width:400px;
}

table td{
	border:1px solid black;
	width:50%;
}

table th{
	border:1px solid black;
	width:50%;
}

tbody th{
	background-color:#EbbbbE;
}

 

 

 

 

 

 

你可能感兴趣的:(JavaScript,html,jquery,css,cache)