Click here to Skip to main content
Rate this: bad
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
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.
Rate this: bad
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>
		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;
			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);}
		function onCellClick(clickedCell)
			var cellTxt = clickedCell.innerHTML;
			var editBox = document.createElement('input');
			editBox.value = cellTxt;
			clickedCell.onclick = '';
			editBox.onblur = function(){onLoseFocus(this);}
		function onLoseFocus(editedCell)
			var cellTxt = editedCell.value;
			parentNode = editedCell.parentNode;
			parentNode.appendChild( document.createTextNode(cellTxt) );
			parentNode.onclick = function() {onCellClick(this);}
		width: 32px;
		text-align: right;
		height: 20px;
	td input
		border: none;
		width: 100%;
<body onload="makeTable('tblHolder');">
	<div id="tblHolder"></div>

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