: table
//1. Javascript
/*
$(document).ready(function(){
});
*/
// ready -- ，
$(function(){
// tr
// even (filter) tbody tr tr ， 。
// ， tbody
$("tbody tr:even").css("background-color","#354524");
//
//$("tbody td:even").css("background-color","red");
var numId = $("tbody td:even");
//
numId.click(function(){
//alert('click');
// ，
var inputObj = $("<input type='text'>");
//
//inputObj.css("border-width","0px");
// 16px
inputObj.css("font-size","16px");
// td. this --dom
var tdObj = $(this);
//
if(tdObj.children("input").length>0){
// td input， click
return false;
}
// td
inputObj.width(tdObj.width);
//
//inputObj.css("background-color","#354524");
inputObj.css("background-color",tdObj.css("background-color"));
var text = tdObj.html();
// td
inputObj.val(text);
// td
tdObj.html("");
// td
inputObj.appendTo(tdObj);
//
//inputObj.get(0).select();-- ， focus
//
inputObj.trigger("focus").trigger("select");
inputObj.click(function(){
return false;
});
// Enter and ESC ，
//
inputObj.keyup(function(even){
//
var keycode = event.which;
//
if(keycode == 13){
//
var inputtext = $(this).val();
// td
tdObj.html(inputtext);
}
// ESC
if(keycode == 27){
// td
tdObj.html(text);
}
});
});
});
/*----------------------------------
val();
trigger();
tr:even;
css("background","url('') repear-x !important");
event.which;
click();
appendTo(); --
children();
html();
width();
*/
1. html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery </title>
<link type="text/css" rel="stylesheet" href="css/editTable.css" />
<script 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> 001</td><td> </td></tr>
<tr><td>002 </td><td> </td></tr>
<tr><td>003 </td><td> </td></tr>
<tr><td>004 </td><td> </td></tr>
</tbody>
</table>
</body>
</html>
2. css
/* CSS Document */
table {
border: 1px solid black;
/* */
border-collapse: collapse;
width: 300px;
}
table td{
border: 1px solid black;
width: 50%;
}
table th{
border: 1px solid black;
width: 50%;
}
tbody th{
background-color: #06C;
}