javascript - 如何使用 Jquery 从表中选择仅 1 行

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)') 告诉它要做的。

我也不喜欢在“文档”上不必要地绑定(bind)委托(delegate)事件；它使您的处理程序运行过于频繁，只是为了检查您是否单击了相关内容。

最好将事件绑定(bind)到更靠近相关标签的地方——要么在编辑按钮本身(然后向上遍历以找到所需的表格行)上，要么在表格上(如此处所示，以防您需要添加行以编程方式并且不想将单个事件重新绑定(bind)到新行。)

(现在更新了答案，因为您已经编辑了问题以表明您想要捕获按钮上的点击而不是整行上的点击)

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