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

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

解决方法:

它正在选择每一行,因为这正是$(‘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>