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

效果图：

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

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

        // JavaScript Document
        var but = null,//定义变量
            n = 0,
            dd = null,
            thlength = null,
            tab = null;
        window.onload=function(){//加载完成后执行的方法
            tabInit();
            addrows();
        }
        //添加表格方法
        function tabInit(){
            //获取元素、建立事件、
            but=document.getElementById("but");
            tab=document.getElementById("tab");
            but.addEventListener("click",addclick);

            tab.setAttribute("boder",'1');//设置表格属性
            tab.setAttribute("width","50%");

            thlength.document.getElementsByTagName("th");

        }
        //创建方法,并创建tr、td到表格里面
        function addrows(){
            n++;
            var tddom = document.createElement("tr");
            var trdom = "";
            var czdom = "";
            for(var i= 0;i<thlength;i++){
                tddom = document.createElement("td");
                //添加按钮
                czdom = document.createElement("button");
                //将删除应用HTML中
                czdom.innerHTML("删除");
                //定义一个标识
                czdom.setAttribute("flag",n);
                //把按钮放到td里
                tddom.appendChild(czdom);
                //设置td的居中属性
                tddom.style.textAlign="center";
            }
            //把td放到tr里面
            trdom.appendChild(tddom);
        }
        //设置tr属性，与删除按钮相关联
        trdom.setAttribute("flag",n);
        tab.appendChild(trdom);

        //用全局变量获取所有的td 
        dd=document.getElementsByTagName("td");
        //并且给每一个添加点击事件
        for(var j = 0;j<dd.length;j++){
            dd[j].addEventListener("click",addclick);
        }

        //添加点击事件
        function addcick(){
            var tdobj= this;
            var tdstr ="";
            //判断文本框里的值不为空
            if(tdobj.style.textAlign !=""){
                return;
            }
            //设置当前对象的属性
            tdstr=tdobj.innerHTML;
            tdobj.innerHTML='<input type="text" value = "'+tdstr+'" style ="boder=none">'
            tdobj.setAttribute("tdsel",sele);
            
            for(var l = 0;l<dd.length;l++){
                dd[l].removeEventListener("click",addcick);

                    }
                }
        //当光标失去焦点时，文本框消失，内容清空
        function xiaoshi(obj){
            //获取文本框内容
            var obj.value;
            obj.remove();

            //获取所有的td
            dd.getElementsByTagName("td");
            for(var i = 0; i<dd.length;i++){
                if(dd[i].getAttribute("tdsel")=="sele"){
                   dd[i].innerHTML = val;
                    dd[i].removeAttribute("tdsel");
                    }
                }
                //给所有td加上点击事件
                for(var j=0;j<dd.length;j++){
                    dd[j].addEventListener("cilck",addclick);
                }
            }

        //功能：删除
        function del(){
            var btnobj = this;
            //获取所有的tr
            var trarr = document.getElementsByTagName("tr");
            for(var a in trarr){
                trarr[a].remove();
            }

        }

效果图：

做之前一定要理清思路：

想要干什么？

需要准备什么？

怎么干？