Link to home
Create AccountLog in
Avatar of dshrenik
dshrenikFlag for United States of America

asked on

Table of checkboxes

The attached code allows the user to create tables dynamically.

Can anybody provide me the code that does the following:
I need a single table as shown in the image. The user enters the dimensions of the table
The user must be able to add/delete rows dynamically (no of columns is fixed)
I don't need an option to delete the table

Thanks! User generated image
<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

Avatar of dshrenik
dshrenik
Flag of United States of America image

ASKER

Also, I need a text area (not a text box, as shown in the image)
Avatar of Ovunc Tukenmez
You can use
Scriptlance http://www.scriptlance.com/
or Freelancer http://www.freelancer.com/
websites to get your work done.
ASKER CERTIFIED SOLUTION
Avatar of Jason C. Levine
Jason C. Levine
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account