用 jQuery编写的可编辑的表格(2)

Js代码为:

    $(document).ready(function(){

      

       //实现隔行变色的效果

       //首先获取tbody中的所有的tr,然后采用:even选择出奇数行的所有的特点,但是返回的是偶数行

       $("tbody>tr:even").css("background-color","pink");

       ///功能一样,是偶数行,实际是奇数行

       $("tbody>tr:odd").css("background-color","#BEBEBE");

       //当点击tbody中的td时,能够把td中的内容替换成一个text框,进行修改

       //点击enter  能够提交数据  点击esc键撤销修改

 

       //获取所有的tr,并注册事件,因为在遍历的时候序号不可编辑,所以序号这一列不能编辑

       $("tbody tr").each(function(index,dom){

           //通过dom得到所有的tr,判断tr中的td如果是>2的才可以编辑

           $(dom).children("td:gt(1)").click(function(){

              //获取td的jQuery对象

              var $td = $(this);//注意得到td的jQuery的对象的时候用的是this,也就是点击哪个获取哪个,如果用的是dom,得到的是整行。

             

              //得到文本框内容

              var tdText = $td.text();  //text  取得所有匹配元素的内容。

             

              //判断如果已经创建了input,就不在创建了,如果没有创建,在创建,是通过判断孩子节点

              if($td.children("input").length>0){

                  return false;

              }

                 

              //清空td中的文本

              $td.html("");  //设置每一个匹配元素的html内容       

 

              //创建可编辑的input

              var $input = $("<input type='text'/>");

              $input.css("background-color",$td.css("background-color"));//设置input的框元素和td中的颜色相同

              $input.css("width",$td.width());//宽度和td的宽度相同

              $input.css("border-width",0);//文本框的边框为0

             

              //在得到文本框的同时得到文本框以前的内容

              $input.val(tdText);  //获得第一个匹配元素的当前值。

             

              //把创建的input放到td中

              $td.append($input);

             

              //当触发td的键盘事件的时候,如果点enter键,保存,如果点esc,取消输入的内容   

              $td.keyup(function(event){

                  //获取键盘按下的事件

                  var key = event.which;

                  //alert(key);

                  if (key == 13) {

                     $td.html($input.val());//得到文本框的值并放到td中

                  }else if(key==27){

                     $td.html(tdText);

                  }

              });

           });

       });

});

3.总结

在这里我大概总结一下text(),val(),html()的区别,因为在这个例子之间,反复用到了这几个属性

html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

html(val):设置每一个匹配元素的html内容

val():获得第一个匹配元素的当前值。

val(val): 设置每一个匹配元素的值。

text():取得所有匹配元素的内容。

text(val): 设置所有匹配元素的文本内容

效果图为:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wywzdd.html