javascript - How can I edit a column when I double click on it? -
i using table view of data, table looks 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 edit salary column in above table when double click column. can me achieve this?
check link. used ajax
---------description------
common.php
<?php // array or retrieve values database , store 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 $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 = $_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 database $value = $_request['value']; echo $value; break; } ?>
Comments
Post a Comment