如何從使用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;  
});