我一直在 Google 和 StackOverflow 上查找，但到目前为止还没有找到我想要的东西。如果有人能指出我正确的方向，那就太好了。
我有一张 5 行的表
<tr>
<th scope="row" class="table-check-cell"><input type="checkbox" name="selected[]" id="table-selected-1" value="1"></th>
<td>123456</td>
<td>Address 1</td>
<td>10th Feb 2011 (10:43am)</td>
<td><ul class="keywords">
<li class="pink-keyword">Awaiting Reply</li>
<li class="purple-keyword">Direct</li>
</ul>
</td>
<td>(Notes Text)</td>
<td>1</td>
<td class="table-actions">
<a href="#" title="View" class="with-tip"><img src="images/magnifier.png" width="16" height="16"></a>
<a href="#" title="Edit" class="with-tip"><img src="images/pencil.png" width="16" height="16"></a>
<a href="#" title="Validate" class="with-tip"><img src="images/navigation.png" width="16" height="16"></a>
<a href="#" title="Close" class="with-tip"><img src="images/cross-circle.png" width="16" height="16"></a>
</td>
</tr>
我想要做的是能够编辑<td>(Notes Text)</td>单击表格单元格中的值，使其更改为输入框（当前显示单元格中的内容），以便可以通过单击它来再次编辑和保存它。
我对 jQuery 有（非常）基础的了解，但对使用 PHP / MySQL 进行更新方面很满意。
任何帮助都会很棒。
Thanks
一种可能的方式：
$('td:contains("(Notes Text)")').click(
function() {
var text = $(this).text();
$(this).text('');
$('<textarea />').appendTo($(this)).val(text).select().blur(
function() {
var newText = $(this).val();
$(this).parent().text(newText).find('textarea').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th scope="row" class="table-check-cell">
<input type="checkbox" name="selected[]" id="table-selected-1" value="1" />
</th>
<td>123456</td>
<td>Address 1</td>
<td>10th Feb 2011 (10:43am)</td>
<td>
<ul class="keywords">
<li class="pink-keyword">Awaiting Reply</li>
<li class="purple-keyword">Direct</li>
</ul>
</td>
<td>(Notes Text)</td>
<td>1</td>
<td class="table-actions">
<a href="#" title="View" class="with-tip">
<img src="image/magnifier.png" width="16" height="16" />
</a>
<a href="#" title="Edit" class="with-tip">
<img src="images/pencil.png" width="16" height="16" />
</a>
<a href="#" title="Validate" class="with-tip">
<img src="images/navigation.png" width="16" height="16" />
</a>
<a href="#" title="Close" class="with-tip">
<img src="images/cross-circle.png" width="16" height="16" />
</a>
</td>
</tr>
</tbody>
</table>
虽然上述方法有效，但我衷心建议将课程应用于td您希望能够编辑的元素（假设您希望能够编辑多个单元格）。
如果失败：你可以使用contentEditablehtml 中的属性：
<table>
<tbody>
<tr>
<th scope="row" class="table-check-cell">
<input type="checkbox" name="selected[]" id="table-selected-1" value="1" />
</th>
<td>123456</td>
<td>Address 1</td>
<td>10th Feb 2011 (10:43am)</td>
<td>
<ul class="keywords">
<li class="pink-keyword">Awaiting Reply</li>
<li class="purple-keyword">Direct</li>
</ul>
</td>
<td contentEditable>(Notes Text)</td>
<td>1</td>
<td class="table-actions">
<a href="#" title="View" class="with-tip">
<img src="image/magnifier.png" width="16" height="16" />
</a>
<a href="#" title="Edit" class="with-tip">
<img src="images/pencil.png" width="16" height="16" />
</a>
<a href="#" title="Validate" class="with-tip">
<img src="images/navigation.png" width="16" height="16" />
</a>
<a href="#" title="Close" class="with-tip">
<img src="images/cross-circle.png" width="16" height="16" />
</a>
</td>
</tr>
</tbody>
</table>
Edited回答OP的问题（在评论中）：
另一个微小的（我希望）问题是，有没有办法让它不再是一个textarea to and input?
是的;这很容易完成：
$('td:contains("(Notes Text)")').click(
function() {
var text = $(this).text();
$(this).text('');
$('<input type="text" />').appendTo($(this)).val(text).select().blur(
function() {
var newText = $(this).val();
$(this).parent().text(newText), find('input:text').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th scope="row" class="table-check-cell">
<input type="checkbox" name="selected[]" id="table-selected-1" value="1" />
</th>
<td>123456</td>
<td>Address 1</td>
<td>10th Feb 2011 (10:43am)</td>
<td>
<ul class="keywords">
<li class="pink-keyword">Awaiting Reply</li>
<li class="purple-keyword">Direct</li>
</ul>
</td>
<td>(Notes Text)</td>
<td>1</td>
<td class="table-actions">
<a href="#" title="View" class="with-tip">
<img src="image/magnifier.png" width="16" height="16" />
</a>
<a href="#" title="Edit" class="with-tip">
<img src="images/pencil.png" width="16" height="16" />
</a>
<a href="#" title="Validate" class="with-tip">
<img src="images/navigation.png" width="16" height="16" />
</a>
<a href="#" title="Close" class="with-tip">
<img src="images/cross-circle.png" width="16" height="16" />
</a>
</td>
</tr>
</tbody>
</table>
请注意更改自$('<textarea />') to $('<input type="text" />')虽然type属性可能不是strictly需要（因为input元素默认为type="text"反正）。还有find('input:text').
参考：
-
appendTo().
-
blur().
-
click().
-
find().
-
parent().
-
remove().
-
select().
-
text().
-
val().
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
