JQUERY实战（在表格中直接对表格中的数据进行更改）

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());
   }
   
  });
 });
});