Click here to Skip to main content
Rate this: bad
good
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.
 
<?php
 }
  else if(isset($_POST['submit_lo_a'])){
 
 include("../dbconfig.php");
 $query=mysql_real_escape_string($_POST['search_type2']);
 
$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'");
 
$num=mysql_num_rows($query_for_result);
 
echo <<<end
<table align="right" >
<tr>
<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>
</tr>
</table>
end;
mysql_close();
?>
<div style="height:500px; overflow:scroll; width:910px;">
<table width="910"   cellspacing="0" cellpadding="5" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#000000; background:#f3f3f3; padding:1px 1px 1px 1px; text-align:left;">
<tr style="font-size:12px; text-align:left;">
<!--<td bgcolor="#CCCCCC" >Local Reimbursement Id</td>-->
<td bgcolor="#CCCCCC" >User Id</td>
<td bgcolor="#CCCCCC">Name</td>
<td bgcolor="#CCCCCC">Type</td>
<td bgcolor="#CCCCCC">From</td>
<td bgcolor="#CCCCCC">To</td>
<td bgcolor="#CCCCCC">Cities</td>
<td bgcolor="#CCCCCC">Days</td>
<td bgcolor="#CCCCCC">Bills</td>
<td bgcolor="#CCCCCC">Remarks</td>
<td bgcolor="#CCCCCC">Amount</td>
<td bgcolor="#CCCCCC">Apply Date</td>
<td bgcolor="#CCCCCC">Apply time</td>
<td bgcolor="#CCCCCC">Status</td>
<td bgcolor="#CCCCCC">Pending</td>
<td bgcolor="#CCCCCC">Edit</td>
 
</tr>
<!--</table>-->
<?php
$i=0;
while ($i < $num)
 {
$f0=mysql_result($query_for_result,$i,"lo_reim_id");
$f1=mysql_result($query_for_result,$i,"User_id");
$f2=mysql_result($query_for_result,$i,"name");
$f3=mysql_result($query_for_result,$i,"Reimbursement_type");
$f4=mysql_result($query_for_result,$i,"re_from");
$f5=mysql_result($query_for_result,$i,"re_to");
$f6=mysql_result($query_for_result,$i,"cities");
$f7=mysql_result($query_for_result,$i,"no_of_days");
$f8=mysql_result($query_for_result,$i,"bills");
$f9=mysql_result($query_for_result,$i,"remarks");
$f10=mysql_result($query_for_result,$i,"amount");
$f11=mysql_result($query_for_result,$i,"apply_date");
$f12=mysql_result($query_for_result,$i,"apply_time");
$f13=mysql_result($query_for_result,$i,"status");
?>
<tr valign="top"  >
<!--<td style="border-bottom:#cdcdcd solid; border-bottom-width:1px;" ><?php echo $f0; ?></td>-->
<td style="border-bottom:#cdcdcd solid; border-bottom-width:1px;" ><?php echo $f1; ?></td>
<td style="border-bottom:#cdcdcd solid; border-bottom-width:1px;"><?php echo $f2; ?></td>
<td style="border-bottom:#cdcdcd solid; border-bottom-width:1px;"><?php echo $f3; ?></td>
<td style="border-bottom:#cdcdcd solid; border-bottom-width:1px;"><?php echo $f4; ?></td>
<td style="border-bottom:#cdcdcd solid; border-bottom-width:1px;" ><?php echo $f5; ?></td>
<td style="border-bottom:#cdcdcd solid; border-bottom-width:1px;"><?php echo $f6; ?></td>
<td style="border-bottom:#cdcdcd solid; border-bottom-width:1px;"><?php echo $f7; ?></td>
<td style="border-bottom:#cdcdcd solid; border-bottom-width:1px;"><?php echo $f8; ?></td>
<td style="border-bottom:#cdcdcd solid; border-bottom-width:1px;"><?php echo $f9; ?></td>
<td style="border-bottom:#cdcdcd solid; border-bottom-width:1px;"><?php echo $f10; ?></td>
<td style="border-bottom:#cdcdcd solid; border-bottom-width:1px;"><?php echo $f11; ?></td>
<td style="border-bottom:#cdcdcd solid; border-bottom-width:1px;"><?php echo $f12; ?></td>
<td style="border-bottom:#cdcdcd solid; border-bottom-width:1px;"><a href="dis-reimbursement-loc.php?lo_reim_id=<?php echo $f0; ?>" ><?php echo $f13; ?></a></td>
<td style="border-bottom:#cdcdcd solid; border-bottom-width:1px;"><a href="pen-reimbursement-loc.php?lo_reim_id=<?php echo $f0; ?>" ><?php echo $f13; ?></a></td>
<td style="border-bottom:#cdcdcd solid; border-bottom-width:1px;">Edit Button</td>
 
</tr>
<?php
$i++;
 
}
////
}
?>
</table>
</div>
 

 
thanks
Posted 6-Sep-12 0:30am
Edited 6-Sep-12 0:42am
v2
Rate this: bad
good
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>
<html>
<head>
<script>
function onCellClicked()
{
	var clickedCell = this;
	var oldText = clickedCell.innerHTML;
	var input = document.createElement('input');
	input.value = oldText;
	input.onblur = onInputLoseFocus;
	clickedCell.innerHTML = '';
	clickedCell.appendChild(input);
// ******
	clickedCell.removeEventListener('click', onCellClicked, false);
// ******
	input.focus();
}
 
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++)
	{
		tr=document.createElement('tr');
		for (var col=0;col<max;col++)
		{
			td = document.createElement('td');
			td.appendChild(document.createTextNode('Cell #' + cellIndex++));
			tr.appendChild(td);
		}
		tbody.appendChild(tr);
	}
	table.appendChild(tbody);
	return table;
}
 
function myInit()
{
	var tbl = makeTable(6);
	addHandlerToElementsByTagName(tbl, 'td', 'click', onCellClicked)
	document.body.appendChild(tbl);
}
</script>
</head>
<body onload="myInit();">
</body>
<html>
  Permalink  
v2
Comments
Rajeshkrathor at 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
 
Thanks
Rajeshkrathor at 7-Sep-12 0:42am
   
seems it will work but i am not able to know how these functions will work.
thanks
Rate this: bad
good
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},
function(data){
//$("#message_").html(data);
//$("#message").hide();
//$("#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);
 
});
  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 8,284
1 Sergey Alexandrovich Kryukov 7,327
2 DamithSL 5,614
3 Manas Bhardwaj 4,986
4 Maciej Los 4,920


Advertise | Privacy | Mobile
Web04 | 2.8.1411023.1 | Last Updated 24 Jan 2013
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