Click here to Skip to main content
12,243,721 members (40,205 online)
Rate this:
Please Sign up or sign in to vote.
See more: Javascript PHP jQuery
Hi friends,
I have a dynamic table which is crating by database query and value coming row by row.
Now i want to put a edit button on every row and want edit function on that button
Means when i click that edit button, i can edit those value.
if any of you have any idea related this then pls let me know ASAP

here is my code.

  else if(isset($_POST['submit_lo_a'])){
$query_for_result=mysql_query("SELECT * FROM local_reimbursement where ((User_id) like '%".$query."%' or (name) like '%".$query."%' or (Reimbursement_type) like '%".$query."%') AND status='Approve'");
echo <<<end
<table align="right" >
<td bgcolor="#6fa34f" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:5px 5px 5px 5px; color:#FFFFFF;" >Total Result Search</td><td>&nbsp;&nbsp; </td><td bgcolor="#044396"  style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:5px 5px 5px 5px; color:#FFFFFF;">$num</td>

Posted 6-Sep-12 0:30am
Edited 6-Sep-12 0:42am
Rate this: bad
Please Sign up or sign in to vote.

Solution 1

One way of doing it is to set an onclick handler for each of the table cells. In that handler, you:
1) get the innerHTML of the cell
2) create an input element
3) set the input's text to be the text read in #1
4) replace the innerHTML of the cell with the html for an input element that contains the text that the cell did
5) sets an onblur handler for the input element, that essentially reverses these steps.

Something like this below perhaps?
[EDIT: I forgot to remove/reinstate the onclick handler for the cell when it's contents were changed to an input element. This meant that clicking on an input then filled it with the text "<input>". See the lines marked with ***

Now all you need to do is transfer the info in the table back to a php page so you can update the database with it. You could do it a whole bunch of ways, I'll leave it to you to decide on and implement one.

<!DOCTYPE html>
function onCellClicked()
	var clickedCell = this;
	var oldText = clickedCell.innerHTML;
	var input = document.createElement('input');
	input.value = oldText;
	input.onblur = onInputLoseFocus;
	clickedCell.innerHTML = '';
// ******
	clickedCell.removeEventListener('click', onCellClicked, false);
// ******
function onInputLoseFocus()
	var input = this;
	var parentCell = input.parentNode;
	parentCell.innerHTML = input.value;
// ******
	parentCell.onclick = onCellClicked;
// ******
function addHandlerToElementsByTagName(parent, tagName, handlerName, handlerFunc)
	var mList = parent.getElementsByTagName(tagName);
	for (var i=0, n=mList.length; i<n; i++)
		mList[i].addEventListener(handlerName, handlerFunc, false);
function makeTable(max)
	var table=document.createElement('table');
	var tbody=document.createElement('tbody');
	var tr, cellIndex = 0;
	for (var row=0;row<max;row++)
		for (var col=0;col<max;col++)
			td = document.createElement('td');
			td.appendChild(document.createTextNode('Cell #' + cellIndex++));
	return table;
function myInit()
	var tbl = makeTable(6);
	addHandlerToElementsByTagName(tbl, 'td', 'click', onCellClicked)
<body onload="myInit();">
Rajeshkrathor 7-Sep-12 0:37am
its not working.
can you be little more specific,
like when this function onCellClicked() will work.
I put in my edit option onclick but it refresh the page and nothing else happening

Rajeshkrathor 7-Sep-12 0:42am
seems it will work but i am not able to know how these functions will work.
Rate this: bad
Please Sign up or sign in to vote.

Solution 2

$.post('add-data-sql-loc.php', {name: name,rm_from:rm_from,rm_to:rm_to,cities: cities,sl: sl,rm_type: rm_type,noofdays:noofdays, bills: bills , remarks: remarks,amount: amount, row: row1,month:month},
//$("#message").fadeIn(1500); //Fade in the data given by the insert.php file 'message_"+RowCount+"'
$('p[name^="message_"]', row).html(data);
$('p[name^="message_"]', row).hide();
$('p[name^="message_"]', row).fadeIn(1500);

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

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web02 | 2.8.160426.1 | Last Updated 24 Jan 2013
Copyright © CodeProject, 1999-2016
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