雙擊某列時如何編輯它？

Question

我正在使用表格查看一些數據，表格如下所示

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

當我雙擊該列時，我想編輯上表中的工資列。 任何人都可以幫助我實現這一目標嗎？

Answer 1

演示

檢查鏈接。 使用 Ajax

- - - - -描述 - - -
常見的.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);
?>

索引.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;
  }
  ?>

Answer 2

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

使用ajax調用一個頁面edit.php

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

顯示帶有值、保存和取消按鈕的文本框

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

單擊保存- 調用 ajax 函數將 Id 和值傳遞到此頁面使用查詢更新

Answer 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

Answer 4

您可以使用 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>

Answer 5

您的目的可以通過使用來實現

contenteditable =“真”

但我更喜歡制作一個“編輯”按鈕（而不是雙擊），它將整個表格 > tr > td(s) 變成可編輯的。 然后是一個“保存”按鈕，它從表（tr > td）中獲取所有數據，然后發送一個ajax請求。

詳細說明：

1. 使“編輯”使它們都可編輯（contenteditable="true"）
2. 進行“保存”以從表中獲取數據並發送到服務器。
3. 發送請求后再次打開 contenteditable="false"。

我就是這樣做的，其余的取決於您的具體方法。