Solved

Retrieve data stored in tables

Posted on 2011-09-04
3
215 Views
Last Modified: 2012-05-12
Please let me know some techniques (or methods) that would help me achieve the following:

The attached code allows the user to dynamically create/delete tables and its rows/columns.
When the user clicks "Save", I must save the state of the page, so that the user (when logged in) on my ASP.NET website can reload the page with all the saved tables and their contents.

So, I am guessing that I need to store the dimensions and IDs of each table, and their elements, and the values and then create empty tables of the same dimensions with appropriate values.

Is there a simple way to do this?

Thanks!
<style type="text/css">
body, p, td, div { font-family: Calibri, Arial, Tahoma; } /* Set the text in most tags to Calibri... */

table {
	margin:10px 0;
	border-collapse: collapse; /* http://www.w3schools.com/css/pr_tab_border-collapse.asp */
}

tr { margin-top:2px; }

td {
	margin-left:2px;
	padding: 2px;
}
div.newcol a {
	text-decoration: none; /* turn off underlines for links in divs with className=newcol */
}
.xmark {
	font-size:14px;
}
.xmark, .pmark, .pRowMark { /* turn off underlines for className=xmar, pmark or pRowMark and give the text the color 888888 */
	color:#888;
	text-decoration:none; 
}
.pmark {
	font-size: 22px;
	margin-left: -8px;
}

.xRowMark, .pRowMark {
	margin-right: 10px;
	margin-left: 65px;
}

.pRowMark {
	font-size: 22px;
	margin-right: 9px;
}

.xTableMark { /* turn off underlines for className=xmark, pmark or pRowMark and give the text the color 888888 and change the font-size. This could have been included above with xmark */
	font-size:18px;
	color:#888;
	text-decoration:none;
}

.xmark:hover,
.xTableMark:hover { color:#F00; } /* change color on hovering over elements with className xmark or xTableMark */

.tableContainer {
	display: inline-block; /* http://www.w3schools.com/css/pr_class_display.asp */
	position: relative;
	padding: 0 20px 20px 0;
	overflow: visible;
}

.tableContainer img.button { /* image with className butto in tableContainer should be posisition absolutely and on top of other stuff */
	position: absolute;
	z-index: 1000;
}

.tableContainer img.button:hover { cursor: pointer; } /* change the cursor to a hand on hover */

.tableContainer img.newCol {
	top: 60px;
	right: 0px;
	width: 20px;
	height: 20px;
}

.tableContainer img.newRow {
	bottom: 5px;
	right: 100px;
	width: 16px;
	height: 16px;
}

</style>

Open in new window

0
Comment
Question by:dshrenik
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 40

Assisted Solution

by:Richard Quadling
Richard Quadling earned 166 total points
ID: 36483211
The code you attached is only CSS styling.

But based upon your question, I would probably build a server side session that holds the dimensions and info and has it updated in realtime via AJAX calls.

So as a user adds a table/row/column, that info is sent immediately to the server.

The session can be logged in any way you want - file/db/etc.

In a way, all you are doing is duplicating the information about the tables/rows/columns that you have in JS onto the server. As the client changes, you sync that to the server.

0
 
LVL 5

Accepted Solution

by:
wmadrid1 earned 167 total points
ID: 36484829
0
 
LVL 28

Assisted Solution

by:strickdd
strickdd earned 167 total points
ID: 36489895
Basically you need to store all the information in your table to a hidden variable that will post to the server when the user clicks "Save". The hidden field can then be parsed and saved on the server-side however you see fit.

The other option is to do an AJAX post every time the user adds/removes a row and have the server-side event update the data as needed. This can cause problems in the long run with performance and accuracy. For example, if an AJAX call fails, the user won't necessarily see that in the browser unless you put in some error catching to revert back to the previous view of the table before the failed call.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

732 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question