双击一列时，如何编辑它

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

本文关键字：何编辑 编辑 一列 双击      更新时间：2023-09-26

我正在使用一个表来查看一些数据，该表看起来像下面

<table>
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Salary</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Imthi</td>
        <td>30000</td>
    </tr>
</table>

双击上表中的薪资列时，我想编辑该列。有人能帮我做到这一点吗？

演示

检查链接。使用Ajax

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

ondblclick="return editColumn('''.$UniqueId.''');"

使用Ajax调用页面编辑.php

edit.php
---------

显示带有值、SAve和Cancel按钮的文本框

save.php
---------

单击保存-调用ajax函数，将Id和Value传递到此页面使用查询更新

您可以使用contenteditable属性（html 5）。但这不是双击。

看看如何使HTML表格单元格可编辑？

示例：http://jsfiddle.net/bFLmg/1/

<table>
    <tr>
        <td contenteditable>I'm editable</td>
    </tr>
    <tr>
        <td>I'm not editable</td>
    </tr>
</table>

我能想到的最简单的例子：

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>

在代码中，您希望为表中的所有值初始化一个数组，而不是单个变量"salary"。

请参阅以下位置的工作代码：

JSFiddle

您的目的可以通过使用来实现

contenteditable="true"

但我更喜欢制作一个"编辑"按钮（而不是双击），将整个表格>tr>td（s）变成可编辑的。还有一个"保存"按钮，它从表（tr>td）中获取所有数据，然后发送ajax请求。

详细说明：

  1. 使"编辑"使其全部可编辑（contenteditable="true"）
  2. 使"保存"从表中获取数据并发送到服务器
  3. 发送请求后，再次将contenteditable="false"

我就是这样做的，剩下的就看你的具体做法了。

相关文章：