【课程】web2.0程序设计

【作业要求】建立一个网页,放置一个 table 元素和一个 Input 按钮,研究 Table DOM对象的属性和方法,用 JavaScript 实现 Table 插入行、删除行、交换两行内容。(仅使用 DOM 原生对象,且适用 IE 和 Chrome)

【参考文档】

 

1.首先按照要求，建立一个网页 Test Table Dom（a table about fruits），假设功能是用来储存一家水果店的账单吧，存有水果店的水果和相应价钱，老板可以增加水果条目，删除水果条目，还能进行排序；

放置一个table元素，为了研究Table Dom的属性和方法，这里我还在table的每一行放置了delete按钮，以及在table下方放置叻insert按钮，还有一个对价格进行升序排序的sort按钮。

                    
                     
A Table About Fruits
    
     
              
       
                    
Name
        
Price($)
        
Delete
               
               
                    
apple
        
5.00
        
               
          
     
    
    New Kind: Price:        
    

初始页面如下：

表格增加行的效果：

 

表格进行排序的效果：

2.首先要清楚要求原生实现的话，获取元素只有三种方法，

getElementById ，getElementsByName ，getElementsByTagName

而表格主要会用到的增删查的属性和方法是：deleteRow(index)   insertRow(insert)   insertCel[]  lcells[]    rows[]

其中排序我是用自己写的冒泡排序来实现的，要交换两行的时候，我直接访问innerHTML来实现的。

 

JS代码如下：

window.οnlοad=function() {    document.getElementById("insert").οnclick=Insert;    document.getElementById("sort").οnclick=Sort;    var arr=document.getElementsByTagName("input");    for (var i = 0; i < arr.length; i++) {        if(arr[i].id=="delete")            arr[i].onclick=Delete;    }    var m;    m += 1;    m = 0;};function Insert() {    var x = document.getElementById("main").insertRow(-1);    var y = x.insertCell(-1);    var z = x.insertCell(-1);    var w = x.insertCell(-1);    y.innerHTML=document.getElementById("name").value;    z.innerHTML=document.getElementById("price").value;    w.innerHTML = "";    w.children[0].οnclick=Delete;    var m;    m = 0;    m++;}function Delete() {    var i =this.parentNode.parentNode.rowIndex;    document.getElementById("main").deleteRow(i);}function Sort() {    var arr=document.getElementById("main").rows;    for (var i=0; i 
     
       parseInt(arr[j+1].cells[1].innerHTML)) {                var tmp1 = arr[j].cells[0].innerHTML;                var tmp2 = arr[j].cells[1].innerHTML;                arr[j].cells[0].innerHTML=arr[j+1].cells[0].innerHTML;                arr[j].cells[1].innerHTML=arr[j+1].cells[1].innerHTML;                arr[j+1].cells[0].innerHTML=tmp1;                arr[j+1].cells[1].innerHTML=tmp2;              }        }    }}
     

 

tips：原生JS 要研究HTML Table Dom ，w3的手册就够用叻