jquery - Generate HTML Table Client Side -


(asp.NET web application) I want to create a page that allows the user to create an HTML table The following controls will be provided: To define the quantity of rows in the table, a textbox, a bulleted list of text boxes and shapes to define the amount of columns in the table (eg Square, Octagon etc.) Will be used for. ) Which will be displayed in each cell.

As the user enters a value in each control, I want to create and display the table based on the existing values. I want to generate the HTML table code on client-side.

What are my options? I have come across a lot that may be useful, but I am unable to piece together everything and gather an applied approach; I have very little experience with client-side scripting, although I would not be shy away from the learning stage (which happens to the programmer), if the result is in a clean, efficient solution.

Whatever information link you can provide will be greatly appreciated.

With some nested loops, jQuery should do this easily. You can customize it with string builder or something, but the basics are very clear. If you are doing something more complicated then you would probably be better looking for one of the templateing engines for JQuery or MS AJAX:

  & lt; Script type = "text / javascript" & gt; $ (Function () ($ ('INPUT, SELECT'). Change (function () {var rows = purseInt ($ ('# rows'). (0) .value; var cols = parseInt ($ (' (0) .value; if (isNaN (lines) isNa (cols) {return;} var size = $ ('# shape') Get (0) .value; drawTable (rows, columns, size) ;;) Draftable (rows, columns, figure) {$ ('# result') empty () .andend ("<"; table & gt; & lt; / table & gt; "); Var For table = $ ('# results & gt; tab'); (Var line = 0; row and rows; line ++) for {var htmlRow; HtmlRow = '& lt; tr & gt;'; var Col = 0; col & l T; cols; col ++) {htmlRow + = ' & lt; img src = "' + + + .gif" alt = "'+ size +'" /> gt; & lt ; / TD & gt; ';} HtmlRow + = "& lt; / tr>"; table.append (htmlRow);}} & lt; / script & gt; Column: & lt; Input ID = "column "Type =" Text "/> 
Lines: & gt; Size: & lt; & lt; br / & gt; ; Id = "size"> gt; option value = "class" & gt; Classes & lt; / Options & gt; & Lt; Option value = "circle" & gt; Circle & lt; / Option & gt; & Lt; / Select & gt; & Lt; Div id = "result" & gt; & Lt; / Div & gt;

Comments

Popular posts from this blog

python - Overriding the save method in Django ModelForm -

html - CSS autoheight, but fit content to height of div -

qt - How to prevent QAudioInput from automatically boosting the master volume to 100%? -