CODEWITHSUNDEEP
javascriptjquerymysqlajax
dev90
dev90

Reputation: 7529

How to select Just 1 Row from a Table using Jquery

I have a created table where i display multiple records..I want to add update functionality using Ajax..

I have written the following code, When i click on any row it make all rows editable..I only want to edit the specific row in which i clicked.

Kindly guide 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);
            });

        });

enter image description here

EDIT - HTML CODE

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

Upvotes: 4

Views: 3568

Answers (4)

Daniel Beck
Daniel Beck

Reputation: 21485

It's selecting every row because that's exactly what $('tr td:nth-child(2)') is telling it to do.

I'm also not a huge fan of binding delegated events on 'document' unnecessarily; it makes your handlers run way too often just to check if you clicked on something relevant.

It's better to bind the event closer to the relevant tags -- either on the edit button itself (and then traverse upwards to find the desired table row) or on the table (as shown here, in case you need to add rows programmatically and don't want to have to rebind individual events to new rows.)

(Updated answer now that you've edited the question to show that you want to catch clicks on a button rather than on the entire row) 

$('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>

Upvotes: 1

joaoruimartins
joaoruimartins

Reputation: 547

The trigger/selector is not right. It needs a flag so that you don't trigger 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;      
});

Upvotes: 1

Someone
Someone

Reputation: 3568

You could find the parent container of your edit button (the td), find the parent of that (the tr) and get the element you need from there 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.
})

Upvotes: 1

Thangaraja
Thangaraja

Reputation: 956

The below code consider all the rows. 

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

Instead of this you need to consider the row belongs to the button clicked. This can be done closest selector. Below is the code

 $(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);
   });

 });

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

Upvotes: 1

Related Questions