Home > Developer > Web Develop
This is a classic interview question ------- Day61, question ------- day61
In table operations a few days ago, three methods of dynamic table generation were recorded:
1. html splicing: concatenates strings or arrays in html, which is the most intuitive to understand.
2. Insert rows and columns; insertRow () and insertCell ()
3. Generate Elements; createElement ()
After completing the record of the day, I also reviewed myself. The solution was not comprehensive enough, so I had to confess it carefully, after the results, I was surprised to find a strange thing: the original dynamic generation of tables, this is a classic interview problem, and there is a more professional solution. So my previous confession became a joke, but it was still incomplete ....
After carefully studying the answers on the internet, I feel that I am more professional than the three methods I have summarized above. Now that I am a classic interview question, let's analyze the records carefully:
1,Check it firstFinal implementation result, Pretty (of course, the above three methods can also be used. If this is the best result, write more)
2,Is it very beautiful? I think it is very beautiful. ComeAnalyze the functional requirements to be implemented:
A. Obtain the values of the expected rows and columns (this is not difficult now, indicating no pressure );
B. dynamically generate tables of corresponding rows and columns Based on the obtained row and column values (that is, mainly to analyze its implementation );
C. Click a cell to obtain the internal values of the cell and the background color of the corresponding cell (this is recorded in the previous js row of table );
3,The previous implementationCode:
Html section:
<Body> <center> classic interview questions <br/> Javascript section:<Script type = "text/javascript"> function CreateTable () {this. oTable = null; this. bgColor = 0;} CreateTable. prototype. init = function (row, col) {// This is the knowledge point 1var oFrag = document. createDocumentFragment (); // This is the knowledge point 2var oTemp = document. createElement ("div"); var oBody = document. body; var aRow = []; var aCol = []; for (var I = row; I --;) {aCol. length = 0; for (var j = col; j --;) {this. bgColor = this. getRanColor (); aCol. p Ush ("<td style = \" background: "+ this. bgColor + "; \"> "+ this. randomRange (1, 15) + "</td>");} aRow. push ("<tr>" + aCol. join ("") + "</tr>")} oTemp. innerHTML = ""; // the necessity for assigning this value to NULL is oTemp. innerHTML = "<table> <tbody>" + aRow. join ("") + "</tbody> </table>"; while (oTemp. firstChild) oFrag. appendChild (oTemp. firstChild); this. oTable & oBody. removeChild (this. oTable); oBody. appendChild (oFrag); this. oTable = oBody. lastChild}, CreateT Able. prototype. randomRange = function (lower, upper) {return Math. floor (Math. random () * (upper-lower + 1) + lower)}, CreateTable. prototype. getRanColor = function () {var str = this. randomRange (0, 0xF0F0F0 ). toString (16); while (str. length <6) str = "0" + str; return "#" + (this. bgColor. toString (). replace ("#",""). toString (10) = str. toString (10 )? Str+ 100000: str)}; window. onload = function () {var table = new CreateTable (); var row = document. getElementById ("rowsNum"); var col = document. getElementById ("colsNum"); var go = document. getElementById ("go"); var getted = document. getElementById ("tablePart"); var tip = document. getElementById ("tipPart"); go. onclick = function () {// hide the information area getted. style. display = "none"; // prevents Memory leakage. oTable & (table. oTable. onclick = null); // re-render the table. init (row. value, col. value); // event proxy table. oTable. onclick = function (event) {// This is recorded, but it is still marked here, very classic event = event | window. event; var anyOne = event.tar get | event. srcElement; if (anyOne. tagName. toUpperCase () = "TD") {tip. style. display = "block"; tip. innerHTML = ""; tip. innerHTML = "<span> the content of this cell is:" + anyOne. innerHTML + "</br> background color:" + anyOne. style. backgroundColor + "</span>" ;}}};</script>4. Important gains todayA. Start from the simplest and most familiar: Get object Source
var anyOne=event.target||window.srcElement;Some of these compatibility means that the IE browser does not have the target attribute, but has the srcElement attribute. firefox, on the contrary, has the target attribute but has no srcElement, and the final purpose of such writing is, the object source can be obtained in any browser, that is, the source of event generation (the clicked object)And obj. tagName is the tag for obtaining the object source, while obj. parentElement is the parent layer object of the retrieved object source. In the selected row, this parent layer object is critical. The tagName here is also critical. After determining it as a column, set the object.
B. Next is the new knowledge of efficiency improvement: Document fragmentation
Var oFrag = document. createDocumentFragment (); oBody. appendChild (oFrag); // Add the document to the body.This is a classic method for dynamically creating html, effectively avoiding multiple calls and improving work efficiency. Here are several classic methods:* CreateAttribute (name); ---- create a feature node with the specified name
* CreateComment (text); ----- create a comment node with text
* CreateDoumentFragment (); --- create a File Fragment Node
* CreateElement ("tagname"); --- create a node named tagname
* CreateTextNode (text); ----------- create a text node containing text
There are only two applications that have been successfully applied here. For the time being, I only need to know about other applications.
C. protatype. This is the most brilliant and important place in it.
First, the above section can be written
CreateTable.prototype = {init: function(row, col) {var oFrag = document.createDocumentFragment();var oTemp = document.createElement("div");var oBody = document.body;var aRow = [];var aCol = [];for(var i = row; i--;) {aCol.length = 0;for(var j = col; j--;) {this.bgColor = this.getRanColor();aCol.push("<td style=\"background:"+ this.bgColor +";\">"+this.randomRange(1, 15)+"</td>");}aRow.push("<tr>"+ aCol.join("") +"</tr>")}oTemp.innerHTML = "";oTemp.innerHTML = "<table><tbody>"+ aRow.join("") +"</tbody></table>";while(oTemp.firstChild) oFrag.appendChild(oTemp.firstChild);this.oTable && oBody.removeChild(this.oTable);oBody.appendChild(oFrag);this.oTable = oBody.lastChild},randomRange: function(lower, upper) {return Math.floor(Math.random() * (upper - lower + 1) + lower)},getRanColor: function() {var str = this.randomRange(0, 0xF0F0F0).toString(16);while(str.length < 6) str = "0" + str;return "#" + (this.bgColor.toString().replace("#", "").toString(10) === str.toString(10) ? str + 100000 : str)}};In addition, I have some understanding of prototype. prototype is used in this application, and the private attributes generated in createTable are similar to those in java, its prototype can be seen as a common property, and the prototype part becomes another prototype. Here, we need to pay special attention to the following points:1. prototype is not an inheritance of prototype, but similar to inheritance. It completely clones the attributes and methods of the prototype, but unlike inheritance, the prototype method can also be used as the current prototype, but it will not be inherited;
2. If both the prototype and the current attribute have the same attribute, search for the attribute first. The prototype is no longer set.
Ji 'Nan is said to have reached the top 3 in the hot city. Sadly, it's boring. prototype has to look at it a little more, but that's tomorrow. Go to bed first, sleepy...
Java classic interview questionsInteger Division
Division of positive integer n p (n) = q (n, n)
Code:
Public static int q (int n, int m ){
If (n = 1) | (n <1) return 0;
If (n <m return q (n, n ));
If (n = m) return q (m-1) + 1;
Return q (m-1) + q (n-m, m );
}
One of the world's top 500 classical interview questions1. As the guard sleeps and dreams while patrolling, they can be understood as leaving their duties without authorization.
2. now that the guard can foresee the fate of the king, he is still loyal to the King and will tell him that the next time, if he betrayed the king, using this ability will also threaten the life of the king.
Such an example is just a leader's instinct for self-defense.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
