How to select only 1 row from a table using jQuery

Question

I have a created table where I show several records. I want to add update functionality using Ajax ..

I wrote the following code. When I click on any line, it makes all the lines editable. I only want to edit the specific line that I clicked on.

Please indicate to me how to achieve this.

<button type="button" 
class="updateUser btn btn-primary btn-xs" data-userId="<?php echo $id; ?>">
<span class="glyphicon glyphicon-pencil"></span>
</button>


    $(document).on("click", ".updateUser", function(){
         $('tr td:nth-child(2)').each(function () {
                var html = $(this).html();
                var input = $('<input type="text" />');
                input.val(html);
                $(this).html(input);
            });

        });

EDIT - HTML

<table class="table table-hover">                                       
    <thead>
        <tr>
            <th>#</th>
            <th>Username</th>
            <th>Password</th>
            <th>Role</th>
            <th>Edit</th>
            <th>Delete</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>"PHP Dynamic ID "</td>
            <td>"PHP Dynamic Username "</td>
            <td>"PHP Dynamic Password "</td>
            <td>"PHP Dynamic Role "</td>

            <td>                                                        
                <button type="button" class="updateUser btn btn-primary btn-xs" data-userId="<?php echo $id; ?>">
                    <span class="glyphicon glyphicon-pencil"></span>
                </button>
            </td>
            <td>
                <button class="deleteUser btn btn-danger btn-xs" type="button" data-userId="<?php echo $id; ?>">
                    <span class="glyphicon glyphicon-remove"></span>                                    
                </button>
            </td>
        </tr>
    </tbody>                                        
</table>

Answer 1

He selects every row because that is what he says $('tr td:nth-child(2)').

"" ; , , , - .

- ( , ) ( , .)

( , , , , )

$('table').on('click', '.updateRow', function() {
    var myTD = $(this).closest('tr').find('td:eq(1)'); // gets second table cell in the clicked row

    // Now do whatever to myTD, such as:
    $('td').removeClass('selected'); // remove any previous selections
    myTD.addClass('selected');
  });

table {border-collapse:collapse}
td {border:1px solid}
.selected {background-color: red}
.updateRow {color: #00F; text-decoration:underline}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr><td class="updateRow">Edit:</td><td>A     </td><td>B  </td><td>C     </td><td>Easy as</td></tr>
  <tr><td class="updateRow">Edit:</td><td>One   </td><td>Two</td><td>Three </td><td>Or simple as</td></tr>
  <tr><td class="updateRow">Edit:</td><td>do    </td><td>re </td><td>me    </td><td>baby</td></tr>
  <tr><td class="updateRow">Edit:</td><td>That's</td><td>how</td><td>simple</td><td>love can be</td></tr>
</table>

Answer 2

.

$('tr td:nth-child(2)')

, . .

 $(document).on("click", ".updateUser", function() {
   $(this).closest('tr').find('td:nth-child(2)').each(function() {
     var html = $(this).html();
     var input = $('<input type="text" />');
     input.val(html);
     $(this).html(input);
   });

 });

: https://jsfiddle.net/jcvs1bg6/1/

Answer 3

You can find the parent container of your edit button (td), find the parent of this (tr) and get the element you need by selecting a numbered child. For example:

$('.updateUser').click(function(){
  var name_td = $(this).parents().eq(1).children().eq(1); 
  // This gets the parent (the tr), then the second child (the send td). Eq is 0 based.
})

Answer 4

The trigger / selector is wrong. He needs a flag so that you do not run the function in edit mode. This will do what you need:

$ (function () {var editing = false;

$(".updateUser").on("click", "tr", function(){
   if(!editing){
     editing= true;
     var userName = $('td:eq(1)', this);
     var html = $(userName).html();
     var input = $('<input type="text" />');
     input.val(html);
     $(userName).html(input);
    }
  }); 

// function to save the value
// after that you should set editing=false;      
});