Question

我有一个创建的表，其中我显示多个记录..我想使用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)')告诉它要做的事情。

我也不是在＆＃39;文件＆＃39;上约束委托事件的狂热粉丝。不必要的;它会让你的处理程序经常运行，只是为了检查你是否点击了相关内容。

最好将事件更接近相关标签 - 在编辑按钮本身上（然后向上遍历以找到所需的表格行）或在桌面上（如下所示，如果你需要以编程方式添加行，并且不希望必须将单个事件重新绑定到新行。）

（现在已经更新了答案，您已经编辑了问题，以表明您希望抓住按钮而不是整个行的点击次数）

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

您可以找到编辑按钮（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

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

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

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

4 个答案: