Question

So, I have a table as given below:

<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>

Now what I want to do is to write a jQuery function against a click event of Edit Image which i put on each row at 4th Column

I successfully pop up the alert but I want the corresponding jQuery to make tds at position 2 and 3 against a Clicked Edit Image(for Specific Row, this.row etc) turn into a text box so I can change their values
My jQuery func. is given below

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

Thank You 🙂

Answer 1

HTML IDs must be unique, so you can’t duplicate the element with id #Edit; make it a class instead 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() is deprecated; notice that I use .on() instead

You have to change the html for the image to:

<img src="editicon.png" class="Edit" />