`

jquery实现可编辑表格

jqueryjavascriptjava 
阅读更多 
<!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>无标题文档</title>
<script src="/ddwrt/js/jquery-1.4.2.js"></script>
 
<script>
 //辅助变量，存储被编辑单元格的原来文本
 var temp_val;

 //盒子边框的css
 var css_border={ "border-style": "solid", "border-width": "2px" };
 //文本居中的css
 var css_txt_center={"text-align":"center"};
 //可编辑表格的class
 var edi_class="edit";

 //用于创建表格元素
 var tableObj = {
  getTable : function(){
   return $("<table/>").css(css_border);
  },
  getTr : function(){
   return $("<tr/>");
  },
  getTd : function(_content){
    var td=$("<td/>");
   td.css(css_border);
   if(_content) td.html(_content);
    return td;
  }
 }

 //用于创建文本框
 var inputObj={
  //创建文本框并绑定事件
  getInput:function(){
   var input=$("<input type='text'/>");
   input.bind(
    "keydown",
    function(event){EventUtil.toUneditable($(this),event.keyCode)}  
   );
   input.bind(
    "blur",
    function(){EventUtil.toBlur($(this))}
   );
   return input;
  }
 }

 //用于创建超链接元素
 var create_link=function(_url,_content){
  var link=$("<a/>");
  link.attr("href",_url);
  link.html(_content);
  return link;
 };

 //可编辑单元格相关的事件
 var EventUtil={
  //嵌入文本框，变为可编辑
  toEditable : function(_target){
   temp_val=$(_target).text();
   //alert(temp_val);
   var input=inputObj.getInput();
   input.val($.trim($(_target).text()));
   input.css("width",(parseInt($(_target).attr("offsetWidth"))-12).toString()+"px");
   $(_target).html(input);
   
   input.focus();
  },

  //去掉文本框，结束编辑
  toUneditable : function(_target,_code){
   if(_code==13){ //enter
    _target.parent().html(_target.val()); //去除文本框，并设置单元格文本
    return;
   }
   if(_code==27){ //esc    
    _target.parent().html(temp_val); //去除文本框，并设置单元格文本
    return;
   }
  },

  toBlur:function(_target){
   _target.parent().html(_target.val()); //去除文本框，并设置单元格文本
   return;
  }
 }

 //创建表格并填充数据
 var init_table=function(_course_schedues){
  var table = tableObj.getTable();

  //创建表头
  var th = tableObj.getTr();
  th.append(tableObj.getTd(" ").attr("colspan","3"));
  th.append(tableObj.getTd("星期一").css(css_txt_center));
  th.append(tableObj.getTd("星期二").css(css_txt_center));
  th.append(tableObj.getTd("星期三").css(css_txt_center));
  th.append(tableObj.getTd("星期四").css(css_txt_center));
  th.append(tableObj.getTd("星期五").css(css_txt_center));
  th.append(tableObj.getTd("星期六").css(css_txt_center));
  th.append(tableObj.getTd("星期日").css(css_txt_center));
  th.append(tableObj.getTd("操作").css(css_txt_center));
  table.append(th);

  //创建表的主体
  for(i=0;i<_course_schedues.length;i++){
   var course_schechue=_course_schedues[i];
   
   //创建前三个单元格
   var tr=tableObj.getTr();
   var td1=$(tableObj.getTd(course_schechue.start_time));
   td1.addClass(edi_class); //添加可编辑表格的class
   tr.append(td1);

   tr.append($(tableObj.getTd(" - ")));

   var td2=$(tableObj.getTd(course_schechue.end_time));
   td2.addClass(edi_class); //添加可编辑表格的class
   tr.append(td2);
   
   //创建其它单元格
   var course_names=course_schechue.course_names;
   for(j=0;j<course_names.length;j++){    
    var td=$(tableObj.getTd(course_names[j]));
    td.addClass(edi_class);  //添加可编辑表格的class
    tr.append(td);
   }

   //创建最后的操作单元格
   var end_td=$(tableObj.getTd());
   end_td.append(create_link("javascript:del("+i+");","删除")).append($("<span>|</span>")).append(create_link("javascript:add("+(i+1)+");","添加"));
   tr.append(end_td);

   table.append(tr);
  }

  //给表格绑定可编辑功能
  $("td[class='"+edi_class+"']",table).bind(
   "dblclick",
   function(){EventUtil.toEditable($(this))}
  );

  return table;
 };
 
 //读取表格中的数据并返回json数据
 var read_data=function(){
  var trs=$("#div1 table tr");
  var temp_schedues=[];

  for(i=0;i<trs.length;i++){
   if(i==0) continue;

   var temp_tr_data={
    start_time:"",
    end_time:"",
    course_names:[]
   }

   var tds=$(trs[i]).children("td");
   for(j=0;j<tds.length;j++){
    if(j==1 || j==(tds.length-1)) continue;

    if(j==0){ 
     temp_tr_data.start_time=$(tds[j]).html();
     continue;
    }

    if(j==2){ 
     temp_tr_data.end_time=$(tds[j]).html();
     continue;
    }

    temp_tr_data.course_names[j-3]=$(tds[j]).html();
   }
   
   temp_schedues[i-1]=temp_tr_data;
  }
  //alert( JSON.stringify(temp_schedues));
  return temp_schedues;
 };

 //添加一新行
 var add=function(_index){
  var temp_schedues=read_data();
  var new_schedue={start_time:"",end_time:"",course_names:["","","","","","",""]}
  temp_schedues.splice(_index,0,new_schedue); //在json数组中添加一个元素

  $("#div1").html(init_table(temp_schedues));
 };
 
 //删除某一行
 var del=function(_index){
  var temp_schedues=read_data();
  temp_schedues.splice(_index,1); //删除json数组中的一个元素

  $("#div1").html(init_table(temp_schedues));
 }

 //用于测试的课表数据
 var course_schedues=[
  {
   start_time:"8:00",
   end_time:"9:00",
   course_names:["口语训练 "," "," ","java基础"," "," "," "]
  },
  {
   start_time:"8:30",
   end_time:"10:10",
   course_names:[" ","口语训练"," "," "," "," ","职业规划"]
  },
  {
   start_time:"8:00",
   end_time:"10:00",
   course_names:["课程1","课程2","课程3","课程4","课程5","课程6","课程7"]
  }
 ];
 
 $(document).ready(
  function(){
   $("input").first().click(function(){
    $("#div1").append(init_table(course_schedues));
   });
  }
 );
</script>
</head>
<body>
 <input type="button" value="click" /><br/>

 <div id="div1"></div>
</body>
</html>
分享到：
| Web客户端访问设备类型判断方法-Js
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics