1.本节中所有的文件都在附件中可以进行下载,下面主要详解JS中的具体细节
JS文件
$(function(){
//通过$(function{});直接开始JQUERY函数部分
//$("tbody tr:even").css("background-color","#ECE9D8");表示给tbody中的tr的奇数行增加颜色背景
//同时.css("background-color")也可以取得某个节点的CSS属性
$("tbody tr:even").css("background-color","#ECE9D8");
//将所有奇数行保存成一个属性值
var numTd=$("tbody td:even");
//给所保存的节点添加click函数
numTd.click(function(){
//通过$("<input type='text'>");注意引号里面的是完整正确的HTML代码,然后加上$表示定义一个DOM节点元素
var inputObj = $("<input type='text'>");
//$(this)表示获取当前节点的对象
var tdObj = $(this);
//tdObj.children("input")表示tdObj的所有的带有input属性孩子节点
if(tdObj.children("input").length>0)
{
return false;
}
//属性.width表示某个节点的宽度,通过'属性.width("")'方式,来设置宽度,通过'属性.width()'的方式来取得某个节点的宽度
inputObj.width(tdObj.width());
inputObj.css("font-size","16px");
inputObj.css("background-color",tdObj.css("background-color"));
var content = tdObj.html().replace(/(^\s*)|(\s*$)/g, "");
//inputObj.val("")表示给inputObj这个节点赋某个值,tdObj.html("")表示将tdObj里面的值清空
inputObj.val(content);
tdObj.html("");
//A.appendTo(B)将A节点添加在B节点上,trigger表示给某个节点触发JS函数。
inputObj.appendTo(tdObj);
inputObj.trigger("focus").trigger("select");
//A.keyup()表示给A节点添加键盘监听函数,必须要传入一个even表示当前事件,event.which(jquery函数)表示所取得的某个键
inputObj.keyup(function(event){
var keycode = event.which;
if(keycode==13)
{
var inputtxt = $(this).val();
tdObj.html(inputtxt);
}
if(keycode==27)
{
tdObj.html($(this).val());
}
});
});
});