How can I edit a column when I double click on it?

Question

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?

You can use the contenteditable attribute. Look at: http://stackoverflow.com/questions/6012823/how-to-make-html-table-cell-editable — Guilherme Natal de Mello, Apr 21 '14 at 07:49
I cant give a full answer because editing table rows would involve a bit of of code depending if you want Static or dynamic changes to tables. You will need to us a JS Plugging, something like this http://mindmup.github.io/editable-table/ — Tasos, Apr 21 '14 at 07:49

J.K · Answer 1 · 2017-09-28T02:20:28.603

DEMO

Check the link. used Ajax

---------DESCRIPTION------
common.php

<?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);
?>

index.php

<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>

ajax_edit.php

  <?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;
  }
  ?>

score 1 · Answer 2 · edited Apr 21 '14 at 07:47

1

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

edited Apr 21 '14 at 07:47

answered Apr 21 '14 at 07:46

J.K

1,382
1
11
27

Kyo · Answer 3 · 2014-04-21T08:02:25.347

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:

JSFiddle

score 1 · Answer 4 · edited May 23 '17 at 11:44

1

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>

edited May 23 '17 at 11:44

Community

1
1

answered Apr 21 '14 at 07:55

Guilherme Natal de Mello

427
4
16

score 0 · Answer 5 · answered Mar 10 '20 at 06:13

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:

Make "Edit" to make them all editable (contenteditable="true")
Make "Save" to take data from table and send to server.
Turn contenteditable="false" again after request has been send.

This is how I do it, rest is up to your specific approach.

How can I edit a column when I double click on it?

5 Answers5