您的位置:首页 > Web前端 > JQuery

Jquery学习,一道笔试题:关于表格

2011-10-03 10:34 204 查看
九月份的一次笔试中,看到一道web编程题,当时只是想着用jquery应该很好实现,但是对知识不是很熟,所以随便写写,回头又一直在想这件事,就开始一直在想着,想来想去都觉得有些障碍,后来问了一下flash的同学,他说他是用重绘的方式,昨天去吃饭的路上突然就想到了= =特此一记:
画一个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);
});
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: