`

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
评论
发表评论

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

相关推荐

    jQuery实现可编辑表格

    总结一下，jQuery实现可编辑表格主要涉及以下步骤： 1. 创建带有输入框的HTML表格结构。 2. 使用CSS定制样式，使输入框融入表格。 3. 使用jQuery监听事件，实现表格单元格的编辑和保存功能。 这个简单的示例展示了...

    jquery 实现可编辑表格

    在网页开发中，jQuery 是一个...综上所述，利用 jQuery 实现可编辑表格涉及到 HTML 结构、jQuery 事件监听、DOM 操作以及可能的数据交互。通过结合这些技术，您可以创建出一个功能丰富的、用户友好的可编辑表格组件。

    JQuery实现可编辑表格

    这篇名为“JQuery实现可编辑表格”的博客文章可能深入探讨了如何利用jQuery的功能来创建一个用户可以编辑的表格。在网页设计中，这种功能常用于数据输入或管理应用程序，允许用户直接在表格内修改数据而无需跳转到...

    JQUERY实现可编辑的表格

    总之，使用jQuery实现可编辑表格是一项实用的技术，它允许用户直接在网页上修改数据，提高了交互性和数据管理的效率。通过学习和实践，你可以根据实际需求进行定制，创建出更加复杂的可编辑表格应用。

    JQuery实现可编辑的表格

    通过以上步骤，我们可以构建出一个功能完善的、基于jQuery的可编辑表格。需要注意的是，虽然jQuery简化了许多任务，但现代前端框架如React、Vue或Angular提供了更强大的状态管理和组件化功能，可能更适合处理复杂的...

    Jquery实现可编辑的表格

    在网页开发中，jQuery是一个非常强大的...总之，使用jQuery实现可编辑表格涉及多个方面，包括DOM操作、事件处理、数据管理以及用户交互优化。通过熟练掌握这些技巧，你可以创建出功能丰富且易于使用的Web应用程序。

    基于jquery的可编辑表格实现代码

    本示例“基于jquery的可编辑表格实现代码”是关于如何利用jQuery创建一个功能丰富的交互式表格，允许用户双击单元格（TD元素）进行编辑，编辑完成后，数据会自动更新回原单元格。以下将详细介绍这一技术实现的关键...

    jquery可编辑性表格

    **jQuery可编辑表格详解** 在Web开发中，表格是一种常用的数据展示方式，而jQuery可编辑表格则让用户体验更上一层楼。它允许用户直接在表格内进行数据编辑，无需跳转页面或刷新，大大提升了交互性和效率。jQuery库...

    jquery可编辑表格.zip

    在这个“jquery可编辑表格.zip”压缩包中，我们关注的是如何使用jQuery来实现一个可编辑的表格功能。这样的功能对于数据展示和管理来说非常实用，尤其是在需要用户即时更新或输入数据的场景下。 首先，让我们详细...

    使用JQuery实现的动态编辑表格

    本人前端小白，因为项目需求，需要动态编辑表格，但是layui的编辑表格只适合 【有数据】修改功能用，并不适合【无数据】新增的功能使用，所以本人研究了几日，才写出了这么一个 无数据绑定，当然也可以自行绑定数据...

    JQuery实现可编辑的表格.rar

    通过以上步骤，我们可以创建一个功能完备、用户体验良好的可编辑表格。JQuery的强大功能使得这个过程变得相对简单，但要注意在实际项目中还需要考虑代码组织、模块化和测试等多方面因素，以确保代码的可维护性和稳定...

    jquery可编辑表格插件

    "jquery可编辑表格插件"就是基于jQuery的一种工具，旨在为网页中的表格提供动态编辑功能，使得用户可以直接在表格中进行数据的增删改查，极大地提升了交互性和用户体验。这种插件在数据展示和管理场景中尤其实用，...

    jquery 实现表格可编辑

    &lt;title&gt;jQuery 可编辑表格 &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; table { border-collapse: collapse; width: 100%; } td, th { border: 1px solid #ddd; padding: 8px;...

    JQuery可编辑表格

    总结来说，利用jQuery创建可编辑表格涉及的关键技术包括DOM操作、事件绑定、数据交互以及用户体验优化。这样的功能增强了用户与网页的互动性，使得数据管理更为直观和高效。通过结合HTML、CSS和jQuery，开发者可以...

    JQuery应用二：可编辑的表格

    总之，利用jQuery实现可编辑表格是一项实用的技能，能够提升网页的交互性。通过理解HTML基础、jQuery选择器和事件处理，以及HTML5的`contenteditable`属性，开发者可以轻松地创建自己的可编辑表格功能。在实际项目中...

    jquery可编辑表格

    jquery可编辑表格代码实现

    利用JQuery实现可编辑的表格

    对于复杂的编辑需求，可以引入插件如DataTables，它提供了丰富的可编辑表格功能，并集成了排序、过滤和搜索等特性。 总之，利用JQuery实现可编辑的表格，不仅提升了用户交互性，还增强了网页的数据管理能力。在实际...

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