使用 jquery-confirm 编辑表单

Question

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

jQuery和jQuery-确认

<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：写“$ Name of the product”的地方应该会出现我点击的每个产品的名称。

Answer 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>

使用 jquery-confirm 编辑表单

Editing form with jquery-confirm

html

php

jquery

jquery-confirm