<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Untitled Document</title> <mce:script type="text/javascript"><!-- function addItem(objFrom,objTo){ var flag = false; for(var i = 0; i < objFrom.options.length;i++){ if(objFrom.options[i].selected == true){ flag = true; var selectItem = new Option(objFrom.options[i].text,objFrom.options[i].value); objTo.options.add(selectItem); objFrom.options.remove(i); } } if(!flag){alert("please select a Item");} sortItem(objTo); } function allAddItem(objFrom,objTo){ for(var i = objFrom.options.length - 1;i>=0;i--){ var objItem = new Option(objFrom.options[i].text,objFrom.options[i].value); objTo.options.add(objItem); objFrom.options.remove(i); } sortItem(objTo); } function sortItem(objTo){ var ln = objTo.options.length; var arrText = new Array(); var arrValue = new Array(); for(var i=0;i<ln;i++){ arrText[i] = objTo.options[i].text; } arrText.sort(); for(var i=0;i<ln;i++){ for(var j = 0;j<objTo.options.length;j++){ if(arrText[i] == objTo.options[j].text){ arrValue[i] = objTo.options[j].value; break; } } } while(ln--){ objTo.options[ln] = null; } for(i = 0;i<arrText.length;i++){ objTo.add(new Option(arrText[i],arrValue[i])); } } function swapItem(option1,option2){ var tempStr = option1.value; option1.value = option2.value; option2.value = tempStr; tempStr = option1.text; option1.text = option2.text; option2.text = tempStr; tempStr = option1.selected; option1.selected = option2.selected; option2.selected = tempStr; } function moveUp(selectObj){ var obj = selectObj.options; for(var i = 1;i<obj.length;i++){ if(obj[i].selected && !obj[i-1].selected){ swapItem(obj[i],obj[i-1]); } } } function moveDown(selectObj){ var obj = selectObj.options; for(var i = obj.length -2;i>-1;i--){ if(obj[i].selected && !obj[i+1].selected){ swapItem(obj[i],obj[i+1]); } } } function moveToTop(selectObj){ var obj = selectObj.options; var oOption = null; for(var i = 0;i<obj.length;i++){ if(obj[i].selected && oOption){ selectObj.insertBefore(obj[i],oOption); }else if(!oOption && !obj[i].selected){ oOption = obj[i]; } } } function moveToBottom(selectObj){ var obj = selectObj.options; var oOption = null; for(var i = obj.length-1;i> -1;i--){ if(obj[i].selected){ if(oOption){ oOption = selectObj.insertBefore(obj[i],oOption); }else{ oOption = selectObj.appendChild(obj[i]); } } } } // --></mce:script> </head> <body> <table> <tr> <td>Color Code </td> <td></td> <td>Sample Order </td> <td></td> </tr> <tr> <td> <select id="selectColor" multiple="multiple" style="width:200px;height:200px;"> <option value="Black">Black</option> <option value="Blue">Blue</option> <option value="DK-RS">DARK RINSE</option> <option value="DK-SW">DARK STONEWASH</option> <option value="Green">Green</option> <option value="MD-SL">MED SANDBLAST</option> <option value="MD-SW">MED STONEWASH</option> <option value="NA">Not applicable</option> <option value="Yellow">Yellow</option> <option value="Red">Red</option> </select> </td> <td> <table> <tr> <td><input type="button" id="btn1" value="-> " onclick="addItem(selectColor,selectSo)"/></td> </tr> <tr> <td><input type="button" id="btn2" value="->>" onclick="allAddItem(selectColor,selectSo)"/></td> </tr> <tr> <td><input type="button" id="btn3" value="<<-" onclick="allAddItem(selectSo,selectColor)"/></td> </tr> <tr> <td><input type="button" id="btn4" value="<- " onclick="addItem(selectSo,selectColor)"/></td> </tr> </table> </td> <td> <select id="selectSo" multiple="multiple" style="width:200px;height:200px;"> </select> </td> <td> <table> <tr> <td><input type="button" id="btn5" value="AA" onclick="moveToTop(selectSo)"/></td> </tr> <tr> <td><input type="button" id="btn6" value="A" onclick="moveUp(selectSo)"/></td> </tr> <tr> <td><input type="button" id="btn7" value="V" onclick="moveDown(selectSo)"/></td> </tr> <tr> </tr> <td><input type="button" id="btn8" value="VV" onclick="moveToBottom(selectSo)"/></td> </tr> </table> </td> </tr> </table> <mce:script type="text/javascript"><!-- document.getElementById("selectColor").ondblclick = function(){ addItem(selectColor,selectSo); }; document.getElementById("selectSo").ondblclick = function(){ addItem(selectSo,selectColor); }; // --></mce:script> </body> </html>
使用CSS建站時，您肯定遇到過形形色色的佈局問題，最後可能被搞得焦頭爛額。本文的目的是讓您的設計過程更爲容易，當您遇到困難時爲您提供快速參考。 1、有疑問，先驗證 在調試時，先對您的代碼進行驗證往往能省去不少麻煩事。格式不正確的
createElement() //創建一個HTML元素 setAttribute() //設置一個屬性 appendChild() //向頁面或向某個元素裏添加元素 removeChild() //刪除元素 insertRow() //
方法 add 向 areas, controlRange 或 options 集合中添加一個元素。 add 創建一個新的 namespace 對象並將其添加到集合中。 addBehavior 給元素附加一個行爲。 AddChannel
<HTML> <HEAD> <title> </title> </HEAD><body><form id="form"><table id = "PrintA" width="100%" border="1" cellsp
前段時間支付寶賬單出現了新特效，就是下月賬單可以推送上月賬單的吸頂位置。 不多說上代碼： 首先：HTML <div class="list" v-for="item,index in 10"> <div class="lis
