使用HTML和JavaScript创建Excel格式输出

Question

I had interview and question asked was:

Write a JS plugin that can take cell and value as input and render excel format output on browser. For example,

Given Input (cell and value):

J3 = 5
A2 = 20
K1 = 10

Output on browser should be in excel format

   A   B   C ....... J    K .......
1                         10
2  20 
3                    5
..

I Was looking for correct solution for the problem.

I tried solving this problem (writing psudeo code)

var  cell = {"J3": 5, "A2":20, "K1": 10}

// Function they will call for generate excel style table
generateExcel(cell, selector) {     
1.  create blank table  which has A-Z column (with selector as A-Z resp) and 1 to 100 rows (with selector as 1 to 100 resp)
2. Loop through each cell and for each cell
  2.1 find the column (J) and row (3)
  2.2 Add/replace value in that TD

3. Once all the information from cell in enter in table,  print the table in the document at given selector        

}

They said it won't be efficient for huge number of cell inputs. I suggest that we can use Matrix create table

   A   B...    J  K .... 
1 [               10      ]
2   20
3              5   

Answer 1

I think you started off well. Begin by creating a table that will contain the elements. This will be 26 columns wide and as tall as the largest y value. Convert the letters to numbers.

Sorry for w3schools link, I'm liable to get downvoted for even mentioning them, but they have the best laid out documentation on the table object that I could google for you. I will update it if someone has something better.

http://www.w3schools.com/jsref/dom_obj_table.asp

MDN Tutorial

https://developer.mozilla.org/en/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces

You can then access the table cell most efficiently through

var table = ;//get by id or create element, not sure what they expect
table.rows[y].cells[x].appendChild(...);

Answer 2

Excel spreadsheets are tables. Can you use a simple table? If so, I would recommend the CSS border-collapse property to make it look better, as well as perhaps reducing cell padding and margin.