时间戳

首页 > 解决方案 > 如何传递选定行的值以弹出警报？

javascript - 如何传递选定行的值以弹出警报？

问题描述

我有包含值的表。所以每一行都有重复的按钮。当用户按下复制按钮时，它会将值发送到 sweetalert2 弹出窗口。但是，它没有得到价值。我已经{{item->description}}在 sweetalert 调用了里面的文本，但它没有传递值？如何通过？我通过了{{item->id}}at duplicate 按钮，但它不起作用。

html

<table class="table table-striped">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Description</th>
                <th scope="col">Plan</th>
                <th scope="col">From</th>
                <th scope="col">To</th>
                <th scope="col">Amount (RM)</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            <?php $count = 1; ?>
            @foreach ($packages as $item)

            <tr>
                <th scope="row">{{$count++}}</th>
                <td>{{$item->description}}</td>
                <td>{{$item->Plan->name}}</td>
                <td>{{$item->from}}</td>
                <td>{{$item->to}}</td>
                <td>{{$item->price}}</td>
                <td>
                <a class="btn btn-xs btn-dark" href="/admin/insurance/product/package/edit/{{$product->id}}/{{$item->id}}">Edit</a>
                    <a class="deletePlanRecord btn btn-xs btn-danger" data-id="{{ $item->id }}"
                        id="delete" href="#">Delete</a>
                <a class="duplicatePlanRecord btn btn-xs btn-danger" data-id="{{ $item->id }}"
                            id="delete1" href="#">Duplicate</a>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>

javascript

$( ".duplicatePlanRecord" ).click(function(e) {

   Swal.fire({
   title: 'Are you sure to duplicate the plan?',
   text: 'try {{$item->description}}',
   input: 'text',
   inputAttributes: {
       autocapitalize: 'off'
   },
   showCancelButton: true,
   confirmButtonText: 'Look up',
   showLoaderOnConfirm: true,
   preConfirm: (login) => {
       return fetch(`//api.github.com/users/${login}`)
           .then(response => {
              if (!response.ok) {
                throw new Error(response.statusText)
              }
              return response.json()
            })
        .catch(error => {
          Swal.showValidationMessage(
            `Request failed: ${error}`
          )
        })
    },

标签： javascriptphpjqueryhtmlsweetalert2

解决方案

(data-description)为重复按钮链接添加一个数据属性，并(id="delete1")从中删除重复的 id，不需要：-

<a class="duplicatePlanRecord btn btn-xs btn-danger" data-id="{{ $item->id }}" data-description="{{ $item->description }}" href="javascript:void(0);">Duplicate</a>

在 JavaScript 中进行以下更改：

$( ".duplicatePlanRecord" ).click(function(e) {
    var id = $(this).data('id'); //get id
    var desc = $(this).data('description'); //get description
    Swal.fire({
        title: 'Are you sure to duplicate the plan?',
        text: 'try id', // or use 'try desc'
        .... rest of the code

注意：-如果不工作，请使用'try id'or 。以及从其他链接中删除重复的内容。'try desc''try '+id'try '+desc(id="delete")

推荐阅读