使用 jquery-confirm 编辑表单答案

【问题标题】：Editing form with jquery-confirm使用 jquery-confirm 编辑表单
【发布时间】：2021-01-17 01:41:00
【问题描述】：

我正在使用 jquery-confirm，我需要捕获我点击编辑的元素的名称。

jQuery 和 jQuery-confirm

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
</head>

PHP

<?php
    $products = array(['name'=>'Balloon'],
        ['name'=>'Bike']);
?>

<table>
    <thead>
      <tr>
        <th>Name</th>            
        <th>Edit</th>
      </tr>
    </thead>    
    <tbody>
      <?php foreach($products as $prod) { ?>
        <tr>
          <td><?php echo $prod['name'] ?></td>
          <td><a class="edit" href="#">Edit Product</a></td>
        </tr>
      <?php } ?>
    </tbody>
</table>

脚本

$('a.edit').confirm({
    content: '<input type="text" value="$ Name of the product.">'
});

Obs：写着“$ 产品名称”的地方，应该会出现我点击的每个产品的名称。

【问题讨论】：

标签： php html jquery jquery-confirm

【解决方案1】：

您可以使用this.$target 获取a 标签，然后单击该标签然后使用.closest('tr').find('td:eq(0)').text() 获取第一个td 内容。

演示代码：

$('.edit').confirm({
  content: function() {
  //get closest tr and find get product name..
    return '<input type="text" value="' + this.$target.closest('tr').find('td:eq(0)').text().trim() + '">'
  }
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td>
        Abc
      </td>
      <td><a class="edit" href="#">Edit Product</a></td>
    </tr>
    <tr>
      <td>
        Abcd
      </td>
      <td><a class="edit" href="#">Edit Product</a></td>
    </tr>
    <tr>
      <td>
        Abce
      </td>
      <td><a class="edit" href="#">Edit Product</a></td>
    </tr>

  </tbody>
</table>

【讨论】：