提取同表行中被點擊的按鈕對應的列數據

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：這是由於按鈕 vs input type='submit'

似乎您的表單提交正在發生並且它進入搜索功能 - 當您單擊刪除按鈕時。

使用輸入類型=按鈕（解決方案 1）

或點擊按鈕返回 false 以避免提交（解決方案 2）

注意：不要忘記，type="submit" 是按鈕的默認設置，因此請將其關閉： Ref: input type="submit" Vs button tag 它們可以互換嗎？ 2. 對於點擊，您可以使用 CSS 值附加事件。 $(".btn btn-info").click(function() {...或在 DOM 中將 clickme 附加到onClick中。不需要在 function 定義中包含機器人。

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