Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Bảng » Bảng động
URL: https://www.javascriptbank.com/dynamic-table.html
Hiệu ứng sẽ tạo một bảng chứa các dữ liệu động để người dùng có thể sắp xếp, di chuyển giữa các dữ liệu này. Bảng này được làm hoàn toàn bằng JavaScript.
Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Bảng » Bảng động
URL: https://www.javascriptbank.com/dynamic-table.html
<SCRIPT LANGUAGE="JavaScript">// Bob Simpson ([email protected])<!-- Beginfunction VER5_Check() {var b = navigator.appName;if (b == "Netscape") this.b = "NS";else if (b == "Microsoft Internet Explorer") this.b = "IE";this.v = parseInt(navigator.appVersion);this.IE5 = (navigator.userAgent.indexOf('MSIE 5') > 0);this.NS5 = (this.b == "NS" && this.v == 5);this.VER5 = (this.IE5 || this.NS5);}is = new VER5_Check();if(! is.VER5) {alert("Internet Explorer 5.0 or Netscape NS6 needed to view this site.");document.write('<meta>');}// End --></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT LANGUAGE="JavaScript"><!-- Begindocument.write('<center>');document.write('<form name="form0">');document.write('<input type="text" name="row" size=6 value="">');document.write('<input type="text" name="name" size=24 value="">');document.write('<input type="text" name="address" size=24 value="">');document.write('<input type="text" name="city" size=24 value="">');document.write('</form>');document.write('</center>');var _id;var _ff = 0;var _rawId = null;var _pages = 0;var _chgFlag = null;_cellZero = null;var _tableStyle="border:0;align:center;width:600";var _headerData = new Array("No.","Name","Address","City");var _tableData = new Array("1","Jones, Tom","110 James Street","Tacoma,WA","2","Cummings","123 Cray St.","Vashon, WA","3","Simpson","Javascript St.","Vashon, WA","4","Gates","Microsoft Way","Redmond, WA","5","Paul Allen","Defunct Kingdome","Seattle, WA","6","Jane Allen","King Street","Seattle, WA","7","Henry Bacon","Elliot Ave.","Seattle, WA","8","John Doe","Ballard","Seattle, WA","9","Mr. Floppy","Smith Tower","Seattle, WA","10","Jerry Allen","Everett Ave.","Seattle, WA","11","June Allen","King Street","Bellevue, WA","12","George Bacon","Elliot Ave.","Seattle, WA","13","Diane Doe","Ballard","Seattle, WA","14","Mrs. Floppy","Smith Tower","Seattle, WA","15","Jeff Allen","Everett Ave.","Seattle, WA","16","Mrs. Avery","Smith Tower","Seattle, WA","17","Henry Aldrich","Everett Ave.","Seattle, WA","18","Tom Turkey","Smith Tower","Seattle, WA","19","John Nerd","Everett Ave.","Seattle, WA");// --></script><script type="text/javascript" language="Javascript1.2"><!-- // Beginfunction build_W3C_body() {docBody = document.getElementsByTagName("body").item(0);mySite = document.createElement("DIV");mySite.id = "_mysite";mySite.style.fontWeight="bold";mySite.setAttribute("align","center");buildDataTable(docBody, _tableData, _tableStyle, _headerData);buttonDiv = document.createElement("DIV");buttonDiv.setAttribute("align","center");msgDiv = document.createElement("DIV");msgDiv.id="message";msgDiv.style.width=600;msgDiv.style.height=25;msgDiv.style.backgroundColor = "maroon";msgDiv.style.color = "white";msgDiv.style.fontWeight = "bold";msgDiv.appendChild(document.createTextNode("Click cell in upper table to get row values!"));buttonDiv.appendChild(msgDiv);style = "width:205px;height:24px;fontSize:8pt;fontWeight:bold;backgroundColor:d5d5d5;";makeButton("update",buttonDiv,style,"UPDATE TABLE");style = "visibility:visible;width:204px;height:24px;fontSize:8pt;fontWeight:bold;backgroundColor:d5d5d5";makeButton("tran",buttonDiv,style,"TRANSMIT CHANGES");style = "width:96;height:24px;fontSize:8pt;fontWeight:bold;backgroundColor:d5d5d5";makeButton("up",buttonDiv,style,"SCROLL-UP");style = "width:96px;height:24px;fontSize:8pt;fontWeight:bold;backgroundColor:d5d5d5";makeButton("down",buttonDiv,style,"SCROLL-DN");docBody.appendChild(buttonDiv);}var _butMsg = new Array_butMsg[0] = "Click cell in upper table to get row values !";_butMsg[1] = "Add Custom Messages!";_butMsg[2] = "Edit in input boxes above.";_butMsg[3] = "Add Custom Messages!";_butMsg[4] = "Click update table to update & create tran table.";_butMsg[5] = "Add Custom Messages!";_butMsg[6] = "Click update table to update & create tran table.";_butMsg[7] = "Add Custom Messages!";_butMsg[8] = "Scroll buttons scroll up or down 5 rows.";_butMsg[9] = "Add Custom Messages!";_butMsg[10] = "Transmit button not implemented at present.";_butMsg[11] = "One row in tran table represents all changes to that row.";var _z=0;var _twoCnt = 0;var _butFlg = 0;function buttonMsg() {if(_butFlg == 0) {document.getElementById("message").style.visibility = "visible";document.getElementById("message").style.backgroundColor = "maroon";document.getElementById("message").style.color = "white";if(_twoCnt == 0) {document.getElementById("message").firstChild.nodeValue = _butMsg[_z++];}_twoCnt++if(_twoCnt == 3)_twoCnt = 0;if(_z == _butMsg.length)_z = 0; }}document.onmousedown = buttonDown;document.onmouseover = mouseOver;document.onmouseout = mouseOut;function mouseOver(e) {tmp = (is.NS5) ? e.target.getAttribute("id") : event.srcElement.id;if(tmp.substring(0,1) == "_" || ! tmp) return;_butFlg = 1;upButton = document.getElementById("message")if(tmp == "tran")buttonColor(tmp,"cdfff6","blue",upButton,"Transmit lower table to server - for test purposes only at present.");if(tmp == "update")buttonColor(tmp,"cdfff6","blue",upButton,"Update upper & lower tables.");if(tmp == "up")buttonColor(tmp,"cdfff6","blue",upButton,"Scroll table up 5 rows.");if(tmp == "down")buttonColor(tmp,"cdfff6","blue",upButton,"Scroll table down 5 rows.");if(tmp == "javaX")buttonColor(tmp,"blue","white",upButton,"Go to good Javascript source.");if(tmp == "siteX")buttonColor(tmp,"blue","white",upButton,"Go to Bob Simpson's Javascript site");if(tmp == "mailX")buttonColor(tmp,"blue","white",upButton,"E-mail author if any questions");if(tmp == "sourceX")buttonColor(tmp,"blue","white",upButton,"Source for this page (dom_table.zip)");if(tmp == "tranTable") {upButton.style.backgroundColor = "red";upButton.style.color = "white";upButton.firstChild.nodeValue = "Changes not allowed here - make changes in upper table !"}if(parseInt(tmp) >= 0) {if(parseInt(tmp.substring(tmp.length-1,tmp.length)) == 0) {buttonColor(tmp,"red","white",upButton,"Changes to row number not allowed !");table.style.backgroundColor="red";}else {buttonColor(tmp,"black","white",upButton,"Click cell to get row values - edit in upper input boxes.");table.style.backgroundColor = "black"; } }if(tmp.substring(tmp.length-1,tmp.length) == "X") {document.getElementById(tmp).style.color = "red";table.style.backgroundColor = "blue"; }}function mouseOut(e) {table.style.backgroundColor="maroon";tmp = (is.NS5) ? e.target.getAttribute("id") : event.srcElement.id;if(tmp.substring(0,1) == "_" || ! tmp) return;_butFlg = 0;document.getElementById("message").style.color = "white";document.getElementById("message").style.backgroundColor = "maroon";document.getElementById("message").firstChild.nodeValue = "Click upper table cell to get row values";if(parseInt(tmp) >= 0 && parseInt(tmp) < 44)document.getElementById(tmp).style.backgroundColor = "eeeeee";else if(tmp.substring(tmp.length-1,tmp.length) != "X" && tmp != "message" && tmp != "tranTable") {document.getElementById(tmp).style.backgroundColor="d5d5d5";}if(tmp.substring(tmp.length-1,tmp.length) != "X") document.getElementById(tmp).style.color = "black";else document.getElementById(tmp).style.color = "blue";}function buttonDown(e) {if( ((is.NS5) ? e.which : event.button) != 1) return true;tmp = (is.NS5) ? e.target.getAttribute("id") : event.srcElement.id;if(! tmp)return trueif(tmp.substring(tmp.length-1,tmp.length) == 0)return;if(tmp == "down")scrollDown();if(tmp == "up")scrollUp();if(parseInt(tmp) || tmp == "00")getRowValue(tmp);if(tmp == "update")changeRow();if(tmp == "tran")buildTranStr();}function buttonColor(id,backColor,fontColor,id1,message) {if(id.substring(id.length-1,id.length) != "X") {document.getElementById(id).style.backgroundColor = backColor;document.getElementById(id).style.color = fontColor;}id1.firstChild.nodeValue = message;id1.style.color = fontColor;id1.style.backgroundColor = backColor;} function scrollDown() {id = _pages * 20;p = id + 20;ct = ((_tableData.length-p)/4);if(ct < 0) return;for(i = 0; i < 5; i++) {for(j = 0; j < 4; j++) {myCell = document.getElementById(i+''+j);if(ct > 0)myCell.firstChild.nodeValue = _tableData[p++];else document.getElementById(i+''+j).firstChild.nodeValue = " - ";}ct--;}_pages++;} function scrollUp() {if(_pages==0) return;id = _pages * 20 ; p = id - 20 ; x = p + 20;for(i = 0; i < 5; i++) {for(j = 0; j < 4; j++) {document.getElementById(i+''+j).firstChild.nodeValue = _tableData[p++]; }}_pages--;}function buildDataTable(appendToId, data, style, header) {table = document.createElement("TABLE");table.style.backgroundColor = "maroon";t = style.split(";");for(i = 0; i < t.length;) {f = t[i++].split(":");x = "table."+f[0]+"='"+f[1]+"'";eval(x);}tablebody = document.createElement("TBODY");row = document.createElement("TR");for(var i = 0; i < header.length; i++) {cell = document.createElement("TD");if(i == 0)cell.setAttribute("width","60px");else cell.setAttribute("width","170px");cell.setAttribute("align","center");cell.style.backgroundColor = "lightgreen";cell.style.fontWeight = "bold";cell.appendChild(document.createTextNode(header[i]));row.appendChild(cell);}tablebody.appendChild(row);c = 0;ptr = (data.length > 20) ? 20 : data.length;for(var i = 0; i < ptr;) {row = document.createElement("TR");for(j = 0; j < header.length; j++) {if(j == 1) {cell.setAttribute("align","center");cell.style.fontWeight = "bold";}cell = document.createElement("TD");cell.setAttribute("id",c+''+j);cell.style.backgroundColor = "#eeeeee";cell.appendChild(document.createTextNode(data[i++]));row.appendChild(cell);}c++;tablebody.appendChild(row);}table.appendChild(tablebody);appendToId.appendChild(table);}function buildTranTable() {if(_ff == 1) {tBody = document.getElementById("tBod");myTR = document.getElementsByTagName("TR");for(i = 6;i < myTR.length; i++) {if(document.form0.row.value == myTR.item(i).firstChild.firstChild.nodeValue) tBody.removeChild(myTR.item(i)); }}if(_ff == 0) {table1 = document.createElement("TABLE");table1.style.backgroundColor="maroon";table1.id = "_table1";table1.align = "center";table1.border = 0;table1.width = 600;tablebody1 = document.createElement("TBODY");tablebody1.id = "tBod";}row1 = document.createElement("TR");row1.id = p;for(i = 0; i < document.form0.length; i++) {cell1 = document.createElement("TD");cell1.id = "tranTable";cell1.style.backgroundColor = "#eeeeee";cell1.style.color = "black";if(i == 0) {cell1.setAttribute("width","60px");cell1.setAttribute("align","center");}else cell1.setAttribute("width","170px");a = document.form0.elements[i].value;document.form0.elements[i].value = "";if(i == 0)cell1.appendChild(document.createTextNode(_cellZero));else cell1.appendChild(document.createTextNode(a));row1.appendChild(cell1);}tablebody1.appendChild(row1);table1.appendChild(tablebody1);docBody.appendChild(table1);_ff = 1;_chgFlag = null;}function buildTranStr() {tranStr = "updateTable.cgi?";myTDs = document.getElementsByTagName("TD");if(myTDs.length<25)return;for(i=24;i<myTDs.length;) {for(j=0;j<4;){tranStr += j++ +"&" + myTDs.item(i++).firstChild.nodeValue + "="; }}alert("Not implemented in demo ! window.location = " +tranStr);}function changeRow() {if(! _id) return;p = ((_pages * 20) + (_id * 4));_cellZero = document.getElementById(_id+0).firstChild.nodeValue;for(i = 0; i < document.form0.length; i++) {if(document.getElementById(_id+i).firstChild.nodeValue != document.form0.elements[i].value && i > 0) {_chgFlag=true;document.getElementById(_id+i).firstChild.nodeValue = document.form0.elements[i].value;_tableData[p+i] = document.form0.elements[i].value; }}_id = 0;if(_chgFlag) buildTranTable();}function getRowValue(x) {_rawId = x;_id = x.substring(0,x.length-1);for(i = 0; i < document.form0.length; i++) {document.form0.elements[i].value = document.getElementById(_id+i).firstChild.nodeValue;}selectedCell = x.substring(x.substring.length-1,x.substring.length);setTimeout("cellSelect(selectedCell)",100);}function cellSelect(selectedCell) {document.forms[0].elements[selectedCell].select();}function makeButton(myId,appendId,styleStr,text) {myButton = document.createElement("BUTTON");myButton.id =myId;temStr = (styleStr.substring(styleStr.length-1,styleStr.length)==";") ?styleStr.substring(0,styleStr.length-1) : styleStr;temp = temStr.split(";");for(i = 0; i < temp.length; i++) {x = temp[i].split(":");str = "myButton.style."+x[0]+"='"+x[1]+"'";eval(str);}myButton.appendChild(document.createTextNode(text));appendId.appendChild(myButton);}function makeLink(href,text,styleStr,appendTo,linkId) {link = document.createElement("A");link.id=linkId;temStr = (styleStr.substring(styleStr.length-1,styleStr.length)==";") ?styleStr.substring(0,styleStr.length-1) : styleStrtemp = temStr.split(";");for(i = 0; i < temp.length; i++) {x=temp[i].split(":");str = "link.style."+x[0]+"='"+x[1]+"'";eval(str);}link.setAttribute("href",href);link.appendChild(document.createTextNode(text));appendTo.appendChild(link);}window.onload = build_W3C_body;// End --></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->