從ajax回應更改特定的動態創建的表行html和文本

從資料庫中，我有一個像這樣的動態表：

<table>
    <?php
    $query = ....;
    foreach ($query as $row) {
        echo '<tr>';
        echo '<td>' . ' <span >' . $row['brand_name'] . '</span>'.
        '<input name="product_id" type="number" value="' . $row['product_id'] . '">'.
        '<input name="company_id[]" type="number" value="' . $row['company_id'] . '">'.
        '<button name="exchange" type="button">Click Me!</button></td>';
        echo '</td>';
        echo '</tr>';
    }
    ?>
</table>

它回傳 4 行，brand_name其中<span>和product_id內<input>。在exchange上點擊按鈕呼叫一個Ajax請求查詢另一個隨機BRAND_NAME并回傳查詢作為JSON這樣的：

{product_id: '2206', brand_name: 'New name', company_id: '234' }

ajax 的腳本是

<script>
    $(document).ready(function() {
        $('button[name="exchange"]').click(function() {
            $.ajax({
                url: 'ajaxChangeBrand.php',
                type: 'POST',
                data: 'keyword='   $(this).parent().find('input[name="product_id"]').val(),
                success: function(response) {
                    var data = JSON.parse(response);
                    $('.bName').html(data.brand_name); // Problem is here
                    $('.company_id').html(data.company_id); // and here
                    console.log(data);
                },
            });
        });
    });
</script>

我的目標是使用來自該特定行的 ajax 回應的新值更改brand_name內部類bName和company_id值。但我的問題是它改變了所有的跨度和bNameclass 的所有輸入company_id。從 ajax 資料更改該表的特定行的最佳方法應該是什么？

uj5u.com熱心網友回復：

存盤對實際單擊的按鈕所在的單元格的參考，以便您可以在該單元格中找到特定元素。

另請注意，company_id 值在val()您需要使用的輸入中，您需要給它一個類名

$('button[name="exchange"]').click(function() {
  // cell this button instance is in
  const $cell = $(this).closest('td');

  $.ajax({
    url: 'ajaxChangeBrand.php',
    type: 'POST',
    data: 'keyword='   $(this).parent().find('input[name="product_id"]').val(),
    success: function(response) {
      var data = JSON.parse(response);
      $cell.find('.bName').html(data.brand_name); // Problem is here
      $cell.find('.company_id').val(data.company_id); // and here
      console.log(data);
    },
  });
});

uj5u.com熱心網友回復：

無法使用 AJAX 進行測驗，但這可能會有所幫助。使用eventclick 函式查找 parentNode 并從中querySelector定位表行中的特定元素。

$(document).ready(function() {
  $('button[name="exchange"]').click(function(e) {
    let tr=e.target.parentNode;
    let span=tr.querySelector('span.bName');
    let pid=tr.querySelector('input[name="product_id"]');
    let cid=tr.querySelector('input[name="company_id[]"]');
    
    console.info( span.textContent, cid.value, pid.value)

    $.ajax({
      url: 'ajaxChangeBrand.php',
      type: 'POST',
      data: 'keyword='   $(this).parent().find('input[name="product_id"]').val(),
      success: function(response) {
        var data = JSON.parse(response);
        span.textContent=data.brand_name;
        cid.value=data.company_id;
        pid.value=data.product_id;
      },
    });
    
    
    
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <span class="bName">Womble</span>
      <input name="product_id" type="number" value="23">
      <input name="company_id[]" type="number" value="88">
      <button name="exchange" type="button">Click Me!</button>
    </td>
  </tr>
  <tr>
    <td>
      <span class="bName">Bagpuss</span>
      <input name="product_id" type="number" value="39">
      <input name="company_id[]" type="number" value="12">
      <button name="exchange" type="button">Click Me!</button>
    </td>
  </tr>
  <tr>
    <td>
      <span class="bName">Clanger</span>
      <input name="product_id" type="number" value="47">
      <input name="company_id[]" type="number" value="91">
      <button name="exchange" type="button">Click Me!</button>
    </td>
  </tr>
</table>

標籤：

上一篇：創建后如何回傳完整的模型物件

下一篇：Laravel：移動模型屬性位置