Jquery学习,一道笔试题:关于表格
2011-10-03 10:34
211 查看
九月份的一次笔试中,看到一道web编程题,当时只是想着用jquery应该很好实现,但是对知识不是很熟,所以随便写写,回头又一直在想这件事,就开始一直在想着,想来想去都觉得有些障碍,后来问了一下flash的同学,他说他是用重绘的方式,昨天去吃饭的路上突然就想到了= =特此一记:
画一个10*10的表格,value为1~100;当双击单元格时,该单元格消失,其后的单元格前进补充单元格,若使行结尾单元格,则由下行首单元格顶上,最后一行最后的单元格补充单元格(元素为0)
采取语言javascript,框架库JQuery,
算法思想:事件响应采取重绘思想;
数组存储单元格元素,当双击单元格时采取事件响应方式,在相对应的数组元素中value置0;
打印时每打印十个则换行,当遍历到数组的value为0的元素时跳过,遍历完后根据存储事件响应次数的值打印0.
画一个10*10的表格,value为1~100;当双击单元格时,该单元格消失,其后的单元格前进补充单元格,若使行结尾单元格,则由下行首单元格顶上,最后一行最后的单元格补充单元格(元素为0)
采取语言javascript,框架库JQuery,
算法思想:事件响应采取重绘思想;
数组存储单元格元素,当双击单元格时采取事件响应方式,在相对应的数组元素中value置0;
打印时每打印十个则换行,当遍历到数组的value为0的元素时跳过,遍历完后根据存储事件响应次数的值打印0.
$(document).ready(function(){ var i=0,tdNum=0,nThrow=0; var table=new Array(100); //store the numbers for(i=0;i<100;i++){ table[i]=i+1; } cur="<tr>"; for(i=0,tdNum=0;i<100;i++){ if(tdNum==10){ tdNum=0; cur+="</tr><tr>"; } cur+="<td id="+table[i]+">"+table[i]+"</td>"; tdNum++; } cur+="</tr>"; $("table#t1").append(cur); $("td").live('click',function(){ $(this).css("background-color","red"); }); $("td").live('dblclick',function(){ var idHide=$(this).attr("id"); if(idHide){ idHide/=1; table[idHide-1]=0; nThrow++; } $("table#t1").empty(); cur="<tr>"; for(i=0,tdNum=0;i<100;i++){ if(tdNum==10){ tdNum=0; cur+="</tr><tr>"; } if(table[i]!=0){ cur+="<td id="+table[i]+">"+table[i]+"</td>"; tdNum++; } } for(i=0;i<nThrow;i++){ if(tdNum==10){ tdNum=0; cur+="</tr><tr>"; } cur+="<td>0</td>"; tdNum++; } cur+="</tr>"; $("table#t1").append(cur); }); });
相关文章推荐
- 关于jquery.noConflict()的学习记录
- 一道关于绑鞋带的笔试题
- 关于“去哪网”一道笔试题解法的思考
- 一道关于员工与部门查询的SQL笔试题
- jquery学习笔记1表格颜色交叉展示
- 关于阿里巴巴一道笔试题
- jQuery学习之:jqGrid表格插件——从Struts2获得数据 推荐
- 关于我在360笔试中做到的一道毁三观的题(函数与变量同名)
- 关于表格的一些属性,细线效果,凸显效果,凹陷效果表格的完成,学习html的第八课
- 关于一道阿里巴巴笔试题的思考
- 学习:Jquery采用ajax调取WebService显示表格(转)
- jquery中关于表格行的增删问题
- jquery关于json的学习
- 阿里巴巴笔试的一道综合题(关于计算机网络)
- 分享一道笔试题目--关于static和extern变量的问题
- 一道关于绑鞋带的笔试题
- 一道简单的C++笔试题,关于抽象shape类求图形周长的问题~
- jQuery学习笔记(6)--复选框控制表格行高亮
- 关于jquery input textare 事件绑定及用法学习