<!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>
jquery实现可编辑表格
最新推荐文章于 2018-10-15 08:28:41 发布