【课程】web2.0程序设计
【作业要求】建立一个网页,放置一个 table 元素和一个 Input 按钮,研究 Table DOM对象的属性和方法,用 JavaScript 实现 Table 插入行、删除行、交换两行内容。(仅使用 DOM 原生对象,且适用 IE 和 Chrome)
【参考文档】table dom 参考手册
1.首先按照要求，建立一个网页 Test Table Dom（a table about fruits），假设功能是用来储存一家水果店的账单吧，存有水果店的水果和相应价钱，老板可以增加水果条目，删除水果条目，还能进行排序；
放置一个table元素，为了研究Table Dom的属性和方法，这里我还在table的每一行放置了delete按钮，以及在table下方放置叻insert按钮，还有一个对价格进行升序排序的sort按钮。
<!DOCTYPE html> <html> <head> <title>Test Table Dom</title> <meta charset="iso-8859-1" /> <script src="table.js" type="text/javascript"></script> </head> <body> <h1 style="text-align:center">A Table About Fruits</h1> <table id= "main" border="1" style="text-align:center"> <tr> <td>Name</td><td>Price($)</td><td>Delete</td> </tr> <tr> <td>apple</td><td>5.00</td><td><input type="button" value="delete" id="delete"></td> </tr> </table> <br> New Kind:<input type="text" id="name"> Price:<input type="text" id="price"> <input type="button" id="insert" value="insert"> <br> <input type="button" id="sort" value="sort"> </body>
初始页面如下：
表格增加行的效果：
表格进行排序的效果：
2.首先要清楚要求原生实现的话，获取元素只有三种方法，
getElementById ，getElementsByName ，getElementsByTagName
而表格主要会用到的增删查的属性和方法是：deleteRow(index) insertRow(insert) insertCel[] lcells[] rows[]
其中排序我是用自己写的冒泡排序来实现的，要交换两行的时候，我直接访问innerHTML来实现的。
JS代码如下：
window.onload=function() { document.getElementById("insert").onclick=Insert; document.getElementById("sort").onclick=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 = "<input value='delete' type='button' id='delete'/>"; w.children[0].onclick=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 <arr.length-1; i++) { for (var j=1; j < arr.length-1-i; j++) { if (parseInt(arr[j].cells[1].innerHTML) > 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的手册就够用叻