使可點擊的行可編輯

我使用每行上的編輯按鈕動態創建下表。使可點擊的行可編輯

<tr> 
<td><?php echo $f1; ?></td> 
<td><?php echo $f2; ?></td> 
<td><?php echo $f3; ?></td> 
<td><?php echo $f4; ?></td> 
<td><input class="edbuttons" type="button" value="Edit"></td> 
</tr>

當編輯按鈕被點擊時，我希望行中的單元格被轉換爲文本框，但我不知道該怎麼做。我花了幾個小時在網上搜索正確的語法，但找不到任何我需要的東西。

這個想法是，當點擊編輯時，用戶可以修改該行上的數據，然後單擊將出現在編輯按鈕位置的保存或取消按鈕。

我已經添加了一個類到編輯按鈕用作選擇器，但我不確定這是否是最有效的方法。

任何幫助感激地收到！

謝謝

來源

2011-08-05 Graham Porter

這是可行的，但爲什麼重新發明wheeel。檢查這個插件已經解決了同樣的問題：http://www.appelsiini.net/projects/jeditable – Chandu

2個「重新發明輪子」的理由 - 1）對JavaScript有良好的學習經驗，2）只需很少的代碼就可以實現這個。我的意見很明顯。 – Dave

我一直希望將此作爲一種學習體驗，因此是DIY方法，但它耗時太長。謝謝你的可愛建議。我使用這個模塊重做了桌子，現在它工作得非常好！ –

Jeditable是一個很好的插件。

您可能還想查看新的html5 contenteditable屬性。將其設置爲true將允許您編輯裏面的文本。

http://html5demos.com/contenteditable

來源

2011-08-05 12:49:28

感謝您的建議，但我決定採用可調整的方式。 –

把文本和與表格單元格內的文本輸入框：

<td id="myText"> 
    <div>My text goes here</div> 
    <input type="text" name="whatever" value="My text goes here" style="display:none;"/> 
</td>

然後讓你的編輯按鈕切換兩者：

//if you have jquery: 
$('#myText div').toggle(); 
$('#myText input').toggle();

如果你不使用jQuery，你可以使用JavaScript來改變每個的顯示。

很明顯，還有其他一些小問題需要解決，但這是一種使您的文本變成輸入框的方式的總體思路。

來源

2011-08-05 12:55:41 Dave

謝謝，這似乎是一個優雅的解決方案。最後，我採用了可調整的方式，因爲它看起來正是我想要的，因爲它很容易實現！ :-) –

使可點擊的行可編輯

回答

相關問題