提示：您可以先修改部分代碼再運行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </tITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""><style type="text/css">.spanOver{text-decoration:underline;cursor:pointer;}.spanOut{text-decoration:none;color:#000000;}</style><SCRIPT LANGUAGE="JavaScript"><!--function addToCart(id){var trid="tr"+id;var tr = document.getElementById(trid);removeTextNode(tr);var nodes = tr.childNodes; //返回子節點的集合var buytab = document.getElementById("buyTab");var itr = buytab.insertRow(-1); //向表中插入一行，返回新行的引用var tdID = document.createElement("TD");//建立TD元素var tdName = document.createElement("TD");var tdPrice = document.createElement("TD");var tdDel = document.createElement("TD");tdID.innerHTML=id;//設定TD的文本tdName.innerHTML=nodes[1].firstChild.nodeValue; //取得TD中的文本tdPrice.innerHTML=nodes[2].firstChild.nodeValue;tdDel.innerHTML="刪除";itr.appendChild(tdID);//將TD添加到TR中itr.appendChild(tdName);itr.appendChild(tdPrice);itr.appendChild(tdDel);}/* * author: 胡傑 * * 整體思路： * 1. 將要排序列的值copy到一個數組(values)中 * 2. 將數組(values)的值進行排序(Sort); * 3. 將原table排序列的值和values數組中值比較，找出排序後原來的值應放在第幾行 * 4. 將原table的所有行複製(clone)一份到newtrs數組 * 5. 移除原table中所有行 * 6. 重新為table添加行和列，添加時的順序和值都來自newtrs數組*/function paixu(obj,isNumber){ var ind = obj.cellIndex;//某列在table中的索引值,從0開始var values = new Array();//用來存放要排序的列的值var newindex = new Array(); //儲存每一行新的位置var newtrs = new Array(); //儲存tab中的行的複製版本var tab = document.getElementById("ptable");//要排序的表格//將要排序的列的值全部複製到values數組中for(var i=1;i<tab.rows.length;i++){values[i-1]=tab.rows[i].cells[ind].innerHTML;}//對值進行排序sortArray(values,isNumber);//計算排序列的值的位置次序for(var i=1;i<tab.rows.length;i++){newindex[i-1] = findIndex(values,tab.rows[i].cells[ind].innerHTML);} //複製原有行for(var i=0;i<newindex.length;i++){ //true:表示同時複製子項目newtrs[newindex[i]-1] = tab.rows[i+1].cloneNode(true);}//排序後的效果for(var i=0;i<newtrs.length;i++){//alert(newtrs[i].childNodes[0].innerHTML);}//迴圈將tab中的tr全部刪除(除了標題列)var l = tab.rows.length;for(var i=1;i<l;i++){ tab.deleteRow(1); //相容IE和FF}//重新將行添加到tab中for(var i=0;i<newtrs.length;i++){ //顯示內容 var tr = tab.insertRow(-1);//FF 中必須加參數。-1 : 代表最後//alert(newtrs[i].childNodes.length); //去掉兩行注釋可看出前後的length不同removeTextNode(newtrs[i]);//移除由於換行帶來的空白節點使適應IE和FF//重新設定新TR的ID值，這樣“購買”功能才能正常使用tr.id="tr"+parseInt(newtrs[i].childNodes[0].innerHTML);//將值賦值到新行for(var j=0;j<newtrs[i].childNodes.length;j++){ //insertCell(j)：FF 中必須加參數var td = tr.insertCell(-1); //-1 : 代表最後 td.innerHTML=newtrs[i].childNodes[j].innerHTML;}}}/* * 找某行應該出現的新位置 * arr: 整個某列的值的Array * v: 需要定位的值 */function findIndex(arr,v){for(var i=0;i<arr.length;i++){if(arr[i]==v){return i+1;}}}/* * 自訂排序方法 * 由於javascript中不管是字母還是數字都是預設按字母的順序排序 * 所以會出現如 14 排在 5 之前的情況 * 該方法通過冒泡排序實現根據字母和數字進行不同的排序 * 參數： * arr:被排序的數組(Array) * isNumber:true -- 按Number排序; false -- 按String排序 * 註：由於Array是參考型別所以該方法無需傳回值 */function sortArray(arr,isNumber){ //如果是字母直接使用Array的sort()方法排序 if(!isNumber){ arr.sort(); return; } //如果是數字則轉換成數字後再排序 var l = arr.length-1;for(var i=0;i< l;i++){for(var j=0;j<l;j++){var temp;if(parseInt(arr[j])>parseInt(arr[j+1])){temp = arr[j];arr[j] = arr[j+1];arr[j+1] = temp;}}}}/* * 功能：移除由於換行帶來的空白節點使適應IE和FF * * 由於IE和FF處理Node時存在區別，如： * <tr><td>這裡有區別</td></tr> * 與 * <tr> * <td>這裡有區別</td> * </tr> * 的Node數目不一樣。FF中換行也是一個文本(Text)節點，而IE不做處理 * 這樣導致節點的childNodes的數目在IE和FF中不同 * */function removeTextNode(tr){ var nodes = tr.childNodes;for(var i=0; i<nodes.length;i++){ //nodeType:元素類型。1--Element; 3--Textif(nodes[i].nodeType!=1){tr.removeChild(nodes[i]); //移除子節點}}}//--></sCRIPT></hEAD><BODY><div id="buyDiv"><table id="buyTab" align="center" width="500" border="1" bordercolor="#0099FF" ><caption>您購買的商品如下：</caption><tr><td>編號</td><td>名稱</td><td>價格</td><td>刪除</td></tr></table></div><br/><br/><table id="ptable" align="center" width="500" border="1" bordercolor="#6666FF"><tr><th onclick="paixu(this,true)" onMouseOver="this.className='spanOver'" onMouseOut="this.className='spanOut'">編號</th><th onclick="paixu(this,false)" onMouseOver="this.className='spanOver'" onMouseOut="this.className='spanOut'">名稱</th><td onclick="paixu(this,true)" onMouseOver="this.className='spanOver'" onMouseOut="this.className='spanOut'">價格</td><th>購買</th></tr><tr id="tr1"><td>1</td><td>a奧特曼</td><td>50</td><td><span onclick="addToCart(1)" onMouseOver="this.className='spanOver'" onMouseOut="this.className='spanOut'">購買<span></td></tr><tr id="tr5"><td>5</td><td>d變形金剛</td><td>100</td><td><span onclick="addToCart(5)" onMouseOver="this.className='spanOver'" onMouseOut="this.className='spanOut'">購買<span></td></tr><tr id="tr6"><td>6</td><td>b鐵膽火車俠</td><td>28</td><td><span onclick="addToCart(6)" onMouseOver="this.className='spanOver'" onMouseOut="this.className='spanOut'">購買<span></td></tr><tr id="tr4"><td>4</td><td>p哆啦A夢</td><td>35</td><td><span onclick="addToCart(4)" onMouseOver="this.className='spanOver'" onMouseOut="this.className='spanOut'">購買<span></td></tr></table></bODY></hTML></td> </tr></table>
提示：您可以先修改部分代碼再運行
