更改特定动态创建的 table 行 html 和来自 ajax 响应的文本

Question

从数据库中，我有一个像这样的动态 table：

<table>
    <?php
    $query = ....;
    foreach ($query as $row) {
        echo '<tr>';
        echo '<td>' . ' <span class="bName">' . $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>

它 returns 说 <span> 内有 brand_name 和 <input> 内有 product_id 的 4 行。单击 exchange 按钮调用一个 ajax 请求，该请求查询另一个随机 brand_name 和 returns 查询作为 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 响应的新值更改 class bName 和 company_id 中的 brand_name 值。但我的问题是它改变了所有 bName class 的跨度和 class company_id 的所有输入。从 ajax 数据中更改 table 的特定行的最佳方法应该是什么？

Answer 1

存储对实际单击的按钮所在的单元格的引用，以便您可以在该单元格中找到特定元素。

另请注意，company_id 值在您需要使用 val() 的输入中，您需要给它一个 class 名称

$('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);
    },
  });
});

Answer 2

无法使用 AJAX 进行测试，但这也许会有所帮助。使用单击函数的 event 查找父节点，然后使用 querySelector 定位 table 行中的特定元素。

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

更改特定动态创建的 table 行 html 和来自 ajax 响应的文本

Change specific dynamically created table row html and text from ajax response

php

ajax

jquery