【问题标题】：How can I edit a column when I double click on it?双击列时如何编辑它？
【发布时间】：2014-06-05 06:19:17
【问题描述】：
我正在使用表格查看一些数据，表格如下所示
<table>
<tr>
<th>Id</th>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>1</td>
<td>Imthi</td>
<td>30000</td>
</tr>
</table>
当我双击该列时，我想编辑上表中的工资列。谁能帮我实现这个目标？
【问题讨论】：
标签：
javascript
html
edit
double-click
【解决方案1】：
你的目的可以通过使用来实现
contenteditable="true"
但我更喜欢制作一个“编辑”按钮（而不是双击），它将整个表格 > tr > td(s) 变为可编辑。而不是一个“保存”按钮，它从表中获取所有数据（tr > td），然后发送一个 ajax 请求。
详细说明：
- 进行“编辑”以使它们都可编辑 (contenteditable="true")
- “保存”以从表中获取数据并发送到服务器。
- 请求发送后再次打开 contenteditable="false"。
我就是这样做的，剩下的看你的具体做法了。
【解决方案2】：
DEMO
检查链接。使用 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;
}
?>
【解决方案3】：
我能想到的最简单的例子：
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
【解决方案5】：
ondblclick="return editColumn(\''.$UniqueId.'\');"
使用Ajax调用页面edit.php
edit.php
---------
显示带有值、保存和取消按钮的文本框
save.php
---------
单击保存 - 调用 ajax 函数将 Id 和 Value 传递给此页面
使用查询更新