提取同表格行中点击的按钮对应的列数据

Question

我正在研究删除功能。根据搜索，表会生成行以及删除按钮。单击按钮时，应从表列中提取显示 id 列值，并通过 ajax 将其发送到后端。

作为第一步，我尝试从单击删除按钮的同一行中提取显示 id 列值。但我面临两个问题

1. 当我尝试单击删除按钮时，其他搜索按钮被触发。
2. 我无法提取与同一行的按钮单击相对应的显示 id 列值。

<script>
    
            $(document).ready(function(){
            
            $('#search-movie').on('submit',function (e) {
                 $.ajax({
                  type: 'POST',
                  url: '/search',
                  data: $('#search-movie').serialize(),
                   success: function (q) {
                   
                    var trHTML='';
                    $.each(q, function (i, userData) {
                                for(j=0; j<userData.length; j++)
                                {
                           
                                trHTML +=
                                        '<tr><td style="padding-right: 10px">'
                                        + userData[j].showid
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].typeof
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].title
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].directors
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].cast
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].country
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].releaseyear
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].rating
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].duration
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].listedin
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].description
                                        // + '</td></tr style="padding-right: 10px">'
                                        + '</td><td style="padding-right: 10px">'
                                        + '<button id="button2" class="btn btn-info" onClick="clickme()">delete</button>'
                                        + '</td></tr>'
                                }
                        });
                        $('#table1').append(trHTML);
                   
                   }
                  });
                 e.preventDefault();
                 });
            
            })
            </script>
            <script>
                function clickme()
                {
                    $(".btn btn-info").click(function() {
                    var $item = $(this).closest("tr").find(".nr").text();         
                    console.log($item);         
                    $("#table1").append($item);       
                });
                }
            </script>

 <div class="form-group">
            <input type="submit" name="submit" class="btn btn-info btn-md" value="submit">
            <button class="btn btn-info btn-md" id="button1" onClick="window.location.reload();">reset</button>
        </div>
        <table id="table1" name="table1">
            <thead>
                <tr>
                   <th style="padding-right: 10px">Show ID</th>    
                   <th style="padding-right: 10px"> Type</th>    
                   <th style="padding-right: 10px">Title</th>    
                   <th style="padding-right: 10px">Director</th>
                   <th style="padding-right: 10px">Cast</th>
                   <th style="padding-right: 10px">Country</th>
                   <th style="padding-right: 10px">Release Year</th>
                   <th style="padding-right: 10px">Rating</th>
                   <th style="padding-right: 10px">Duration</th>
                   <th style="padding-right: 10px">Listed In</th>
                   <th style="padding-right: 10px">Description</th>
    
                </tr>
              </thead>
              <tbody>
              </table>

Answer 1

问题 1：这是由于按钮与输入 type='submit'

似乎发生了表单提交，并且当您单击删除按钮时，它会转到搜索功能。

使用 input type=button （解决方案 1）

或单击按钮作为 return false 以避免提交（解决方案 2）

注意：不要忘记，type="submit" 是默认的按钮，所以不要使用它！参考： input type="submit" 与按钮标签是否可以互换？
2. 对于点击，您可以使用 CSS 值附加事件。 $(".btn btn-info").click(function() { ...。或者在 DOM 中将 clickme 附加到 onClick 中。不需要有机器人函数定义。

 <script>
                function clickme()
                {
                    $(".btn btn-info").click(function() {
                    var $item = $(this).closest("tr").find(".nr").text();         
                    console.log($item);         
                    $("#table1").append($item);       
                });
                }
            </script>