How can i loop through all the tags in a row and get the values on button click

Question

I am trying to loop through all the elements in a tow on a button click

my button:

``

my onclick method:

   $(this).closest('tr').find('td').each(function() {
        var textval = $(this).text(); 
        console.log('textval');
   });

For some reason this isn't printing our anything at all, its not even going into the code in the each.

I tried printing console.log($(this).closest('tr').find('td').text())

but it just shows empty text.

Here is my table rows:

            
loading my data via an ajax call:
$.ajax({
    url: "/product/fetch_admin_products",
    type: "GET",
    data: {},
    success: function(resp) {

        if (resp) {
            if (resp.products) {

                setupTable(resp.products)
            }
        }
    },
    error: function(resp) {


    },
});

$('#productsTable').bootstrapTable({
 data: data,
 columns: [ 
    { width: "15%" },
    { width: "15%" },
    { width: "15%" },
    { width: "15%" },
    { width: "25%" },
    {
      field: 'operate',
      title: '',
      width: '15%',
      align: 'center',
      valign: 'middle',
      clickToSelect: false,
      formatter : function(value,row,index) {
        //return '';
        return  '' +
                '' +
                ''
      }
    }
  ],       
});
Any clue on what i'm doing wrong?
Should i be taking a diffrent approach to this?


    
        
            Name
            
        
        
            Store URL
            
        
        
            Status
            
        
        
            Created At
            
        
        
            Notes
            
        
        
            
            
        
    


    
        test 1221321
        -
        pending review
        about 3 hours
        -
        
    
    
        prepend this product
        -
        pending review
        about 3 hours
        -
        
    
    
        test product 2
        -
        pending review
        about 3 hours
        -
        
    
    
        Test product append
        -
        pending review
        about 3 hours
        -
        
    
    
        Pet Grooming Deshedding Brush Glove 
        -
        pending review
        about 2 months
        This is a test note to see wtf the table does with it
        
    
    
        LED Dog Collar
        -
        pending review
        about 2 months
        This is a test note to see wtf the table does with it
        
    
    
        Pet Grooming Deshedding Brush Glove 
        -
        pending review
        about 2 months
        This is a test note to see wtf the table does with it

CertainPerformance · Accepted Answer

The problem is that, in your code, the calling context of viewProduct is window, not the td, resulting in $(this).closest('tr') failing:

function viewProduct () {
  console.log(this.location.href);
}


  
    
      test 1221321
      -
      pending review
      about 3 hours
      -
      view

Instead, attach the event handler properly with Javascript, and you can reference the desired td and its containing tr explicitly. For example:

const td = document.querySelector('td:last-child');
td.onclick = function() {
  [...td.parentElement.children].forEach(td => console.log(td.textContent));
}


  
    
      test 1221321
      -
      pending review
      about 3 hours
      -
      view

How can i loop through all the <td> tags in a row and get the values on button click

Answers (1)

Related Questions

How can i loop through all the &lt;td&gt; tags in a row and get the values on button click

Answers (1)

Related Questions

How can i loop through all the <td> tags in a row and get the values on button click