1

所以，我有一个如下表：

<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 将位置 2 和 3 的 tds 针对单击的编辑图像（对于特定行、this.row 等）变成一个文本框，以便我可以更改它们的值
My jQuery func。下面给出

$('#Edit').live('click', function () {
    alert('inside edit image click func');      
    // write Jquery Func here
});

谢谢你 ：）

4

5 回答 5

1

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" />
于 2012-08-17T06:16:28.880 回答
1

有两种方法可以做到这一点：

  1. 使用 jQuery 将 td 值替换为输入，或
  2. 输入已经存在（但隐藏）。

虽然它使页面更大，但我发现方法 #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 中的更改，从 .inputs 中获取行 id <tr>，并通过 ajax 更新 db。

于 2012-08-17T06:29:06.257 回答
0

回答你的

我想...将位置 2 和 3 的 tds 变成一个文本框，这样我就可以更改它们的值

尝试使用Jeditable插件。演示页面应该让您了解这是否适合您。

于 2012-08-17T06:24:36.020 回答
0

首先，使用.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的 s，并将 html 内的 html 更改td为输入框：

$('#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() + "' />");
    }
});

这会将该行上的列更改为输入框，并使用单元格中已经存在的信息预先填充它们。

于 2012-08-17T06:25:47.720 回答
0

试试这个

$('#Edit').click(function () {
  $(this).parent().parent().find('.editable').each(function(){

    var currentVal = $(this).text();
    $(this).html("<input type='text' value='"+ currentVal +"'>")
  });
});

检查小提琴

于 2012-08-17T06:50:57.167 回答