如何通过单击按钮通过ajax将a的单元格值传递给控制器​​？

Question

我想单独获取每个单元格值。在这里，我包括了用来获取一个单元格值的jQuery，但它不起作用（我使用.each函数获得了所有单元格值，但没有单独获得）。实际上，我想在单击同一行的单元格时将一行的所有单元格值传递给控制器​​。什么是有效方式？

$(function(){
    $('#product_table').on('click', '#add', function(){
        var p_name = ($(this).closest("tr").find('#p_name').text());
        alert (p_name);
        
       
      /* var token= {{csrf_token()}}
         $.ajax({
            method:"post",
            url:"{{ route('product.edit') }}",
            data: {p_name:p_name, _token:token},
            success:function (response) {
                location.reload();
            }

        });
        $(this).parents("tr").find(".add, .edit").toggle();
        $(".add-new").removeAttr("disabled");
      */
        
    });
});

<table class="table table-bordered table-hover" id="product_table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Details</th>
            <th>Price</th>
            {{--<th>Image(s)</th>--}}
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
    @if($products->count()>0)
        @foreach($products as $product)
        <tr>
            <td id="p_name">{{$product->name}}</td>
            <td id="p_details">{{$product->details}}</td>
            <td id="p_price">{{$product->price}}</td>
            <td>
              <a class="add" id="add" data-id="{{$product->id}}" title="Add"></a>
              <a class="edit" title="Edit"></a>
              <a class="delete"  title="Delete" data-id="{{$product->id}}"></a>
            </td>
        </tr>
        @endforeach
    @else
        <tr>
            <td colspan="4" class="text-center bg-danger">No Product Data Found</td>
        </tr>
    @endif
    </tbody>
</table>

Answer 1

您可以遍历所有td行，并检查是否具有属性ID。然后创建一个数组，并将该td值推入数组，如下所示：

$('#product_table').on('click', '#add', function(){
                dataString = {};
                $(this).closest("tr").find('td').each(function(){
                    let attrId = $(this).attr('id');
                    if (typeof attrId !== typeof undefined && attrId !== false) {
                        dataString[attrId] = $(this).text();
                    }
                });


                 var token = {{csrf_token()}};
                 $.ajax({
                    method:"post",
                    url:"{{ route('product.edit') }}",
                    data: {data:dataString, _token:token},
                    success:function (response) {
                        location.reload();
                    }

                });
                $(this).parents("tr").find(".add, .edit").toggle();
                $(".add-new").removeAttr("disabled");


            });

希望它对您有帮助。