冒泡排序和对表格的增删改减

Posted 2020-10-22 邹少聪

冒泡排序代码

效果图：

 隐含的逻辑描述（假设数组有n项）：

1， 需要进行n-1趟的“冒泡”比较过程。
2， 每一趟的比较都前一趟少比一次，第一趟需要比较n-1次
3， 每趟比较，都是从数组的开头（0）开始，跟紧挨的元素比较，并进行交换（需要的时候）

 

  1         // javascript Document
  2         var but = null,//定义变量
  3             n = 0,
  4             dd = null,
  5             thlength = null,
  6             tab = null;
  7         window.onload=function(){//加载完成后执行的方法
  8             tabInit();
  9             addrows();
 10         }
 11         //添加表格方法
 12         function tabInit(){
 13             //获取元素、建立事件、
 14             but=document.getElementById("but");
 15             tab=document.getElementById("tab");
 16             but.addEventListener("click",addclick);
 17 
 18             tab.setAttribute("boder",\'1\');//设置表格属性
 19             tab.setAttribute("width","50%");
 20 
 21             thlength.document.getElementsByTagName("th");
 22 
 23         }
 24         //创建方法,并创建tr、td到表格里面
 25         function addrows(){
 26             n++;
 27             var tddom = document.createElement("tr");
 28             var trdom = "";
 29             var czdom = "";
 30             for(var i= 0;i<thlength;i++){
 31                 tddom = document.createElement("td");
 32                 //添加按钮
 33                 czdom = document.createElement("button");
 34                 //将删除应用html中
 35                 czdom.innerHTML("删除");
 36                 //定义一个标识
 37                 czdom.setAttribute("flag",n);
 38                 //把按钮放到td里
 39                 tddom.appendChild(czdom);
 40                 //设置td的居中属性
 41                 tddom.style.textAlign="center";
 42             }
 43             //把td放到tr里面
 44             trdom.appendChild(tddom);
 45         }
 46         //设置tr属性，与删除按钮相关联
 47         trdom.setAttribute("flag",n);
 48         tab.appendChild(trdom);
 49 
 50         //用全局变量获取所有的td 
 51         dd=document.getElementsByTagName("td");
 52         //并且给每一个添加点击事件
 53         for(var j = 0;j<dd.length;j++){
 54             dd[j].addEventListener("click",addclick);
 55         }
 56 
 57         //添加点击事件
 58         function addcick(){
 59             var tdobj= this;
 60             var tdstr ="";
 61             //判断文本框里的值不为空
 62             if(tdobj.style.textAlign !=""){
 63                 return;
 64             }
 65             //设置当前对象的属性
 66             tdstr=tdobj.innerHTML;
 67             tdobj.innerHTML=\'<input type="text" value = "\'+tdstr+\'" style ="boder=none">\'
 68             tdobj.setAttribute("tdsel",sele);
 69             
 70             for(var l = 0;l<dd.length;l++){
 71                 dd[l].removeEventListener("click",addcick);
 72 
 73                     }
 74                 }
 75         //当光标失去焦点时，文本框消失，内容清空
 76         function xiaoshi(obj){
 77             //获取文本框内容
 78             var obj.value;
 79             obj.remove();
 80 
 81             //获取所有的td
 82             dd.getElementsByTagName("td");
 83             for(var i = 0; i<dd.length;i++){
 84                 if(dd[i].getAttribute("tdsel")=="sele"){
 85                    dd[i].innerHTML = val;
 86                     dd[i].removeAttribute("tdsel");
 87                     }
 88                 }
 89                 //给所有td加上点击事件
 90                 for(var j=0;j<dd.length;j++){
 91                     dd[j].addEventListener("cilck",addclick);
 92                 }
 93             }
 94 
 95         //功能：删除
 96         function del(){
 97             var btnobj = this;
 98             //获取所有的tr
 99             var trarr = document.getElementsByTagName("tr");
100             for(var a in trarr){
101                 trarr[a].remove();
102             }
103 
104         }

表哥的增删改减

效果图：

做之前一定要理清思路：

想要干什么？

需要准备什么？

怎么干？