Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

vincej's avatar
vincej
OP
3 years ago
Level 15

Select a JS value from a specific row in a table

HI all,

I have some html which accommodates many rows of the same type of data ie product name, id, price, quantity:

<tbody id="tableQuotation">
                        <tr class="quotation delete_row ">
                            <td>{{ Form::text('product_name[]',' ',['class'=>'form-control  product_name','placeholder'=>'Min. 3 characters']) }}</td>
                            <td> {{ Form::text('product_id[]',' ', ['class'=>'product_id form-control','readonly'=>'readonly' ]) }}</td>
                            <td>{{ Form::text('price[]',' ',['class'=>'form-control price','readonly'=>'readonly', ]) }}</td>
                            <td>{{ Form::text('quantity[]',' ', ['class'=>'form-control quantity ']) }}</td>
                            <td>{{ Form::text('cost[]',null ,['class'=>'form-control cost', 'readonly'=>'readonly' ]) }}</td>
                            <td style="text-align: center">{{ Form::checkbox('delete','true') }}</td>
                        </tr>
                        </tbody>

The above HTML is repeated for every row ( ie every product) on the page. The very last td contains a checkbox which when clicked fires a function to remove the closest row ie closest product.

Here is my problem: I want to select the product_id contained within the second td. I have tried everything I can think of with no luck. First I will show you the code which selects the row in general and removes the row. This works:

 $("#tableQuotation,#editTableQuotation").on('click', 'td input:checkbox', function () {
        $(this).closest("tr.delete_row").remove();

Here is the code I have tried every which way, and it DOES NOT work. all I get is id undefined

  $("#tableQuotation,#editTableQuotation").on('click', 'td input:checkbox', function () {
        var id = $("tr.delete_row.product_iddone").closest().val();

So any ideas who I can grab the product_id out of the td ??

Many thanks !!

0 likes
7 replies
Tray2's avatar

I had a similar problem at work, where I needed to grab a certain tr and a certain td .

What I did was giving adding a click listener to each row

let rows = document.queryASelectorAll('tbody tr');
rows.forEach(row => {
	row.addEventListener('click', doSomething());
});

function doSomething(event) {
	console.log(event.target.children[1].children[0].value);
}

With the event target which should be the clicked tr you can get it's children and from there get the value. I haven't tested the code but the theory is good.

vincej's avatar
vincej
OP
3 years ago
Level 15

@tray2 @jlrdw Thank you both! I will give your suggestions a try tomorrow AM and will tell you how I got on. Since I posted, I was also thinking that something like this might also work, although I have not tried it.What do you think? :

 var id = $(this).parents(':eq(1)').find('input').filter('.product_id').val();
Tray2's avatar

@vincej Another way is to add a onclick to each row like this

@foreach($somethings as $something)
<tr onclick="doSomething({{ $something->id }})"><td>Value 1</td><td>{{ $something->id }}</td>
@enforeach
vincej's avatar
vincej
OP
3 years ago
Level 15

Hi guys - Apologies. I forgot to respond to your suggestions. I really appreciate what you guys have done for me. In the end I went with:

var id = $(this).parents(':eq(1)').find('input').filter('.product_id').val();

It works fine and it was easy to understand. However I will bookmark your suggestions for future reference!

Many Thanks !

Snapey's avatar

@vincej bit late to this but why didn't you just set the ID as the value of the checkbox?

vincej's avatar
vincej
OP
3 years ago
Level 15

@Snapey Well if the truth be told I simply wanted to close off this enquiry rather than leaving @tray2 and @jlrdw in the lurch, and so to that end I I simply confirmed that I would use that form of syntax. In reality my code does use that form, but progressed beyond searching for ID. I use the nested set model for my categories and hence I decided to make use of that when identifying the category of the product rather than using the product_id which is very limiting . So in reality I do this:

var productLftString = $(this).parents(':eq(1)').find('input').filter('.productLft').val();
        var productLft = Number(productLftString);
        var productRgtString = $(this).parents(':eq(1)').find('input').filter('.productRgt').val();
        var productRgt = Number(productRgtString);
        var costString = $(this).parents(':eq(1)').find('input').filter('.cost').val();

Please or to participate in this conversation.