【课程】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的手册就够用叻
时间： 2024-12-08 09:16:50