I am using a table to view some of the data, the table looks like below
<table>
<tr>
<th>Id</th>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>1</td>
<td>Imthi</td>
<td>30000</td>
</tr>
</table>
I want to edit the salary column in the above table when I double click that column. Can anyone help me achieve this?
Check the link. used Ajax
---------DESCRIPTION------
<?php
// array OR retrieve values from database and store it as array
$EmployeeArray[1] = array('id'=>1,'name'=>'John','salary'=>30000);
$EmployeeArray[2] = array('id'=>2,'name'=>'Imthy','salary'=>20000);
?>
<script>
function editColumn(Id)
{
var params = 'option=edit&Id=' + Id ;
var DivId = 'edit_' + Id;
ajax_function('ajax_edit.php', params, DivId);
}
function saveColumn(Id)
{
var value = document.getElementById('salary_'+Id).value;
var params = 'option=save&value=' + value + '&Id' + Id ;
var DivId = 'edit_' + Id;
ajax_function('ajax_edit.php', params, DivId);
}
</script>
<?php
require_once('common.php');
?>
<table>
<tr>
<th>Id</th>
<th>Name</th>
<th>Salary</th>
</tr>
<?php
foreach($EmployeeArray as $k=>$v)
{
$Id = $v['id'];
$Name = $v['name'];
$Salary = $v['salary'];
echo '
<tr>
<td>'.$Id.'</td>
<td>'.$Name.'</td>
<td ondblclick="return editColumn(\''.$Id.'\');">
<div id="edit_'.$Id.'">'.$Salary.'</div></td>
</tr>
';
}
?>
</table>
<?php
require_once('common.php');
$option = isset($_REQUEST['option']) ? $_REQUEST['option'] : '';
$Id = isset($_REQUEST['Id']) ? $_REQUEST['Id'] : '';
switch($option)
{
case 'edit': // Display Text box
$value = $EmployeeArray[$Id]['salary'];
echo '
<input type="text" id="salary_'.$Id.'" value="'.$value.'" style="width:50px;" />
<input type="button" value="Save" onclick="return saveColumn(\''.$Id.'\');" />';
break;
case 'save': // Save to Database
$value = $_REQUEST['value'];
echo $value;
break;
}
?>
ondblclick="return editColumn(\''.$UniqueId.'\');"
use Ajax to call a page edit.php
edit.php
---------
Show text box with value, SAve and Cancel Button
save.php
---------
click Save - call the ajax function pass the Id and Value to this page Use query to update
The simplest example I can think of:
JS:
var salary = 30000;
document.getElementById('salary').innerHTML = salary;
function divDblClick(target){
var new_salary=prompt("Please enter your salary", salary);
salary = new_salary;
document.getElementById(target.id).innerHTML = salary;
}
HTML:
<table>
<tr>
<th>Id</th>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>1</td>
<td>Imthi</td>
<td id="salary" ondblclick="divDblClick(this)"></td>
</tr>
</table>
In your code, you would want to initialize an array for all the values in the table, instead of a single variable "salary".
See the working code at:
You could use contenteditable attribute (html 5). But it's not double click.
Look at How to make HTML table cell editable?
Example: http://jsfiddle.net/bFLmg/1/
<table>
<tr>
<td contenteditable>I'm editable</td>
</tr>
<tr>
<td>I'm not editable</td>
</tr>
</table>
Your purpose can be achieved by using
contenteditable="true"
But I prefer making an "Edit" button (rather than double-click) which turns the complete table > tr > td(s) as editable. And than a "save" button which takes all the data from table (tr > td) and than sends an ajax request.
To elaborate:
This is how I do it, rest is up to your specific approach.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.