zoukankan      html  css  js  c++  java
  • Jquery学习,一道笔试题:关于表格【最近记】

    九月份的一次笔试中,看到一道web编程题,当时只是想着用jquery应该很好实现,但是对知识不是很熟,所以随便写写,回头又一直在想这件事,就开始一直在想着,想来想去都觉得有些障碍,后来问了一下flash的同学,他说他是用重绘的方式,昨天去吃饭的路上突然就想到了= =特此一记:

    画一个10*10的表格,value为1~100;当双击单元格时,该单元格消失,其后的单元格前进补充单元格,若使行结尾单元格,则由下行首单元格顶上,最后一行最后的单元格补充单元格(元素为0)

    采取语言javascript,框架库JQuery,

    算法思想:事件响应采取重绘思想;

    数组存储单元格元素,当双击单元格时采取事件响应方式,在相对应的数组元素中value置0;

    打印时每打印十个则换行,当遍历到数组的value为0的元素时跳过,遍历完后根据存储事件响应次数的值打印0.

     1 $(document).ready(function(){
    2 //print a table with 1 to 100
    3 var i=0,tdNum=0,nThrow=0;
    4 var table=new Array(100);
    5 //store the numbers
    6 for(i=0;i<100;i++){
    7 table[i]=i+1;
    8 }
    9 cur="<tr>";
    10 for(i=0,tdNum=0;i<100;i++){
    11 if(tdNum==10){
    12 tdNum=0;
    13 cur+="</tr><tr>";
    14 }
    15 cur+="<td id="+table[i]+">"+table[i]+"</td>";
    16 tdNum++;
    17 }
    18 cur+="</tr>";
    19 $("table#t1").append(cur);
    20
    21 $("td").live('click',function(){
    22
    23 //alert($(this).attr("id"));//get the "id"
    24 $(this).css("background-color","red");
    25 });
    26 $("td").live('dblclick',function(){
    27 var idHide=$(this).attr("id");
    28
    29 if(idHide){
    30 idHide/=1;
    31 table[idHide-1]=0;
    32 nThrow++;
    33 }
    34 $("table#t1").empty();
    35
    36 cur="<tr>";
    37 for(i=0,tdNum=0;i<100;i++){
    38 if(tdNum==10){
    39 tdNum=0;
    40 cur+="</tr><tr>";
    41 }
    42 if(table[i]!=0){
    43 cur+="<td id="+table[i]+">"+table[i]+"</td>";
    44 tdNum++;
    45 }
    46 }
    47 for(i=0;i<nThrow;i++){
    48 if(tdNum==10){
    49 tdNum=0;
    50 cur+="</tr><tr>";
    51 }
    52 cur+="<td>你妹</td>";
    53 tdNum++;
    54 }
    55 cur+="</tr>";
    56 $("table#t1").append(cur);
    57 });
    58
    59 $("p#a").click(function(){
    60 $(this).append($("div#dtest"));
    61 });
    62
    63 });



  • 相关阅读:
    JS——jquery UI
    js——正则表达式
    jsonp——使用公共接口获取数据
    JS——json、ajax、jsonp
    [HNOI2011]括号修复 / [JSOI2011]括号序列
    [HNOI 2016] 树
    luogu_P3313 [SDOI2014]旅行
    无旋Treap模板
    [CF 718C] Sasha and Array
    [洛谷 P4556] 雨天的尾巴
  • 原文地址:https://www.cnblogs.com/dont27/p/2198485.html
Copyright © 2011-2022 走看看