Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript HTML5
Without JQuery how to create editable datagrid using HTML5 and JavaScriptvaScript
Posted 7-Aug-12 0:53am
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Without JQuery Vs HTML5 and JavaScript
jQuery is nothing but a compressed JavaScript library that makes developers life easy and simple.
 
If you are ready for JavaScript then you should be ready for jQuery, it will benefit you only. I believe I already shared one such control with you earlier.
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

Does this work for you? There's no ability to use formulas, though the technique has always been adequate for my needs. Cant find any old projects with it so I had to re-write, hope it's correct.
 
<!DOCTYPE html>
<html>
	<script>
		function byId(e){return document.getElementById(e);}
		function makeTable(strParentId)
		{
			var table, tbody, curX, curY, curRow, curCell
			table = document.createElement('table');
			tbody = document.createElement('tbody');
			var sideLen = 20;
			table.appendChild(tbody);
			
			for (curY=0; curY<sideLen; curY++)
			{
				curRow = document.createElement('tr');
				for (curX=0; curX<sideLen; curX++)
				{
					curCell = document.createElement('td');
					curCell.appendChild( document.createTextNode( (curY*sideLen)+curX+1 ) );
					curCell.onclick = function() {onCellClick(this);}
					curRow.appendChild(curCell);
				}
				tbody.appendChild(curRow);
			}
			byId(strParentId).appendChild(table);
		}
		
		function onCellClick(clickedCell)
		{
			var cellTxt = clickedCell.innerHTML;
			var editBox = document.createElement('input');
			editBox.value = cellTxt;
			clickedCell.removeChild(clickedCell.childNodes[0]);
			clickedCell.appendChild(editBox);
			clickedCell.onclick = '';
			editBox.focus();
			editBox.onblur = function(){onLoseFocus(this);}
		}
 
		function onLoseFocus(editedCell)
		{
			var cellTxt = editedCell.value;
			parentNode = editedCell.parentNode;
			parentNode.removeChild(editedCell);
			parentNode.appendChild( document.createTextNode(cellTxt) );
			parentNode.onclick = function() {onCellClick(this);}
		}
 
	</script>
	<style>
	td{
		width: 32px;
		text-align: right;
		height: 20px;
	}
	td input
	{
		height:16px;
		text-align:center;
		border: none;
		width: 100%;
	}
	</style>
<head>
</head>
<body onload="makeTable('tblHolder');">
	<div id="tblHolder"></div>
</body>
</html>
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 428
1 Maciej Los 249
2 BillWoodruff 199
3 /\jmot 180
4 Suraj Sahoo | Coding Passion 150
0 OriginalGriff 8,484
1 Sergey Alexandrovich Kryukov 7,407
2 DamithSL 5,639
3 Maciej Los 5,159
4 Manas Bhardwaj 4,986


Advertise | Privacy | Mobile
Web04 | 2.8.1411023.1 | Last Updated 9 Aug 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100