所以，我有一个表格如下：
<table border='1' id="table" style="color: #004080;">
<tr>
<th >EmpID</th>
<th >EmpName</th>
<th >EmpDesignation</th>
<th >Edit</th>
<th >Del</th>
</tr>
<?php
foreach($result->result() as $row)
{
?>
<tr >
<td >
<?php
echo $row->EmpID
?>
</td >
<td >
<?php
echo $row->EmpName;
?>
</td>
<td >
<?php
echo $row->EmpDesignation;
?>
</td>
<td >
<img src="editicon.png" id="Edit" />
</td>
<td >
<img src="Delicon.png" onclick="Del(this)" />
</td>
</tr>
<?php
}
?>
</table>
现在我想做的是针对编辑图像的单击事件编写一个 jQuery 函数，我将其放在第 4 列的每一行上
我成功弹出警报，但我希望相应的 jQuery 针对单击的编辑图像（对于特定行、this.row 等）在位置 2 和 3 处使 tds 变成一个文本框，以便我可以更改它们的值
我的jQuery函数。给出如下
$('#Edit').live('click', function () {
alert('inside edit image click func');
// write Jquery Func here
});
谢谢:)
HTML ID必须是唯一的，所以你不能用id #Edit复制元素;把它变成一个类，class='Edit'：
$(document).ready(function() {
/* Older version: $('#table').delegate('.Edit', 'click', function() { */
$('#table').on('click', '.Edit', function() {
$(this).closest('tr').find('td:eq(1), td:eq(2)').each(function() {
// replace the existing text with a textbox containing that text
var existingVal = $(this).text();
$(this).html('<input type="text" value="' + existingVal + '" >');
});
});
// when the user is finished editing, change the value and remove the textbox
/* Older version: $('#table').delegate('td input', 'focusout', function() {*/
$('#table').on('focusout', 'td input', function() {
$(this).parent().html( this.value );
});
});
.live()已弃用;请注意，我改用.on()
您必须将图像的 html 更改为：
<img src="editicon.png" class="Edit" />
有两种方法可以做到这一点：
- 使用 jQuery 将 td 值替换为输入，或者
- 输入已经存在（但隐藏）。
虽然它使页面更大，但我发现方法 #2 更快、更稳定。它的工作原理是这样的：
.CSS：
.inputs { display: none; }
Javascript：
$('.edit').click(function(){
$(this).parent('tr').find('.values').hide();
$(this).parent('tr').find('.inputs').show();
});
.PHP：
<table><?
foreach ($result->result() as $row) {
echo '
<tr id="row_'. $row->id .'">
<td><span class="values">'. $row->EmpID .'</span>
<span class="inputs"><input name="EmpID" value="'. $row->EmpID .'"></span>
</td>
<td><span class="values">'. $row->EmpName .'</span>
<span class="inputs"><input name="EmpName" value="'. $row->EmpName .'"></span>
</td>
<td><img class="edit" src="editicon.png"></td>
<td><img class="del" src="delicon.png"></td>
</tr>';
?></table>
然后，我使用另一个jQuery调用来查找.inputs中的更改，从<tr>获取行ID，并通过ajax更新数据库。
回答您的
我要...使位置 2 和 3 的 TD 变成文本框，以便我可以更改它们的值
尝试使用 Jeditable 插件。演示页面应该让您知道这是否适合您。
首先，使用 .on() 方法（或 .delegate()，特别是对于 1.7 之前的 jQuery），而不是 .live() 方法，因为后者已被弃用。
其次，不要将 id 用于编辑图标。 改变是这样，与其说id="Edit"，不如说class="Edit"。 您的代码，就目前而言，会产生多个 ID，这违反了 HTML DOM，并导致浏览器中出现不可预测的行为。
<table border='1' id="table" style="color: #004080;">
<tr>
<th>EmpID</th>
<th>EmpName</th>
<th>EmpDesignation</th>
<th>Edit</th>
<th>Del</th>
</tr>
<?php foreach($result->result() as $row) { ?>
<tr>
<td><?php echo $row->EmpID ?></td>
<td><?php echo $row->EmpName; ?></td>
<td><?php echo $row->EmpDesignation; ?></td>
<td><img src="editicon.png" class="Edit" /></td>
<td><img src="Delicon.png" onclick="Del(this)" /></td>
</tr>
<?php } ?>
</table>
也就是说，您知道单击的项目，因此只需向上遍历到tr，然后向下遍历到相关的td，然后将td内的html更改为输入框：
$('#table').delegate('.Edit','click', function () {
$(this).parent('tr').find('td:eq(1), td:eq(2)').each(function () {
$(this).html("<input type='text' value='" + $(this).html() + "' />");
}
});
这会将该行上的列更改为输入框，并用单元格中已存在的信息预先填充它们。
试试这个
$('#Edit').click(function () {
$(this).parent().parent().find('.editable').each(function(){
var currentVal = $(this).text();
$(this).html("<input type='text' value='"+ currentVal +"'>")
});
});
检查小提琴