如何使用Jquery从表中选择Just 1 Row

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

我有一个创建的表，我显示多个记录..我想使用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);
            });

        });

EDIT - HTML CODE

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

4 个解决方案

#1

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

它正在选择每一行，因为这正是$（'tr td：nth-​​child（2）'）告诉它要做的事情。

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>

#2

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/

演示：https：//jsfiddle.net/jcvs1bg6/1/

#3

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;

您可以找到编辑按钮的父容器（td），找到它的父级（tr）并通过选择编号的子级从中获取所需的元素。例如;

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

#4

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;

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