如何从使用jQuery

Question

选择表中仅有1行我有一个创建的表在哪里显示多个records..I要添加使用Ajax更新功能..

我写了下面的代码，当我点击在任何行上，它使所有行都可编辑。我只想编辑我点击的特定行。

请亲引导我如何做到这一点。

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

     }); 

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

它选择的每一行，因为这正是$('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

在下面的代码consid呃所有的行。

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

你可以找到你的编辑按钮（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. 
}) 

Answer 4

触发器/选择器不正确。 它需要一个标志，以便在编辑模式下不触发该功能。 这将你需要的东西：

$（函数（）{VAR 编辑= 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;  
});