How to create Editable Grid using DHTML

satishsabapathy · #1 (**permalink**) Oct 16th, 2003, 11:30

Hi,
I want to create Editable Grid in DHTML. And Grid should have option of freezing columns & rows.

Anybody can give me solution to create such a grid.

Thanks

Smokie · #2 (**permalink**) Oct 16th, 2003, 12:22

http://dhtmlgrid.sourceforge.net/

u2orange · #3 (**permalink**) Oct 16th, 2003, 13:08

it's rough, but is your basic logic. Is this the sort of thing you are looking for?

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
	<style type="text/css">
	input{
		border: 0px 0px 0px 0px;
		font-family: verdana;
		fot-size: 10px;
		}
		
	td{
		border: 1px solid #aaaaaa;
		}
	</style>
	
	<script language="JavaScript" type="text/javascript">
	function ControlGrid(colrow)
		{
		for(a=0; a<document.frmGrid.elements.length; a+=1)
			{
			if(document.frmGrid[a].name.substring(0,2) == colrow)
				{
				if(document.frmGrid[a].disabled==false)
					{
					document.frmGrid[a].disabled=true
					}
				else
					{
					document.frmGrid[a].disabled=false
					}					
				}
				
			if(document.frmGrid[a].name.substring(2,4) == colrow)
				{
				if(document.frmGrid[a].disabled==false)
					{
					document.frmGrid[a].disabled=true
					}
				else
					{
					document.frmGrid[a].disabled=false
					}					
				}
				
			}
		}
	</script>
</head>

<body>

<form name="frmGrid">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td></td>
		<td><input type="button" value="Enable/Disable" onClick="ControlGrid('c1')"></td>
		<td><input type="button" value="Enable/Disable" onClick="ControlGrid('c2')"></td>
		<td><input type="button" value="Enable/Disable" onClick="ControlGrid('c3')"></td>
	</tr>
	
	<tr>
		<td><input type="button" value="Enable/Disable" onClick="ControlGrid('r1')"></td>
		<td><input type="text" name="c1r1"></td>
		<td><input type="text" name="c2r1"></td>
		<td><input type="text" name="c3r1"></td>
	</tr>
	
	<tr>
		<td></td>
		<td><input type="text" name="c1r2"></td>
		<td><input type="text" name="c2r2"></td>
		<td><input type="text" name="c3r2"></td>
	</tr>
</table>
</form>


</body>
</html>

HTH
u2o

Smokie · #4 (**permalink**) Oct 20th, 2003, 13:17

nice!

What are these grids used for anyway? Any how could i use one in conjuction with asp? Like how do you pass the edited values to another page where they are saved into a database using asp?

Thanks

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Editable websites	kmcreative	Starting Out	5	Sep 28th, 2007 15:19
Data grid controls	Alfonso Calderon	ASP.NET Forum	5	Aug 5th, 2006 04:31
Help designing a crossword grid...	andrewsco	Web Page Design	4	Jul 3rd, 2006 08:05
Break the Grid	kevrapley	Introduce Yourself	3	Jun 7th, 2004 09:01

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
How to create Editable Grid using DHTML