How to get td values in simple way?

Question

Hi experts here is a snippet:

$('.fa-edit').on('click', function() {
var skill_id = $(this).closest('td').prev('td').attr("id");
var email_id = $('#' + skill_id).closest('td').prev('td').attr("id");
var name_id = $('#' + email_id).closest('td').prev('td').attr("id");
var name  = $('#' + name_id).text();
var email  = $('#' + email_id).text();
var skill  = $('#' + skill_id).text();
alert(name);
 });





      
          Name
          Email 
          Expertise      
          Action
           
      


    
      
      Dynamic User1
      
       
      dynamic_user1@email.com 
      
      
      Skill1

I'm getting the td values for editing in below js. This is working but I want a simple solution for this.

$('.fa-edit').on('click', function() {
var skill_id = $(this).closest('td').prev('td').attr("id");
var email_id = $('#' + skill_id).closest('td').prev('td').attr("id");
var name_id = $('#' + email_id).closest('td').prev('td').attr("id");
var name  = $('#' + name_id).text();
var email  = $('#' + email_id).text();
var skill  = $('#' + skill_id).text();
alert(name);
 });

Please suggest me a very simple method to achieve this. Thanks in advance.

user_4725892 · Answer

Try this simple solution

var name=$(this).parent().siblings(":nth-child(1)").text();
var email=$(this).parent().siblings(":nth-child(2)").text();
var skill=$(this).parent().siblings(":nth-child(3)").text();
    alert(name);

user_7611062 · Answer

let values = [];

$('button').click(function()
{
    $('td').each(function()
    {
        values.push($(this).text())
    })
});

console.log(values);

I prefer working with objects/arrays - this way you just push the .text() into an array. You can take it a step further with your keys but if this array is static then you and only need to run this once (or once within the code) then numeric indexes will be faster.

user_2630817 · Answer

You can use each $(this).closest('tr').find('td') to iterate through td and get the values.

$('.fa-edit').on('click', function() {
  $(this).closest('tr').find('td').each(function(e) {  
    console.log($(this).attr("id"),$(this).text());
  })
});



  
    
      Name
      Email 
      Expertise
      Action
       
    
  
  
    
      
        Dynamic User1
      
      
        dynamic_user1@email.com
      
      
        Skill1
      
      

         EDIT

user_900032 · Answer

You can get all the text in an ordered index array like this

$('.fa-edit').on('click', function(e){
    let element = $(e.target);
    let arr = element.parent().siblings().text();
    console.log(arr);
    // this will return as 

    // Dynamic User1               :: arr[0]
    // dynamic_user1@email.com     :: arr[1]
    // Skill1                      :: arr[2]
});

user_8659288 · Answer

Try This

$('.fa-edit').on('click', function() {
var name= $(this).closest('tr').children('td:eq(0)').text();  
var email= $(this).closest('tr').children('td:eq(1)').text();  
var skill= $(this).closest('tr').children('td:eq(2)').text();  
});

user_6429700 · Answer

If you have fixed prefix 'dynamic' in your id of td, then you can do something like below.

$('.fa-edit').on('click', function() {
    let answer = [];
    $('[id^="dynamic"]').filter(function() {
        answer.push($(this).text())
    });
    
    alert(answer);
 });





      
          Name
          Email 
          Expertise      
          Action
           
      


    
      Dynamic User1
      dynamic_user1@email.com
      Skill1

How to get td values in simple way?

6 Answers