Как передать значения ячеек <tr>в контроллер через ajax, нажав на кнопку?

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");


            });

Надеюсь, это поможет вам.