JSFiddle - React, Tailwind, and code Playground

by Mobeen Sarwar

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<h4>How to Get Value of any td Onclick</h4>
<table class="table table-condensed" id="mastermindTable">
                <thead>
                  <tr>
                    <th width="20%" align="left" valign="middle">Name</th>
                    <th width="20%" align="left" valign="middle">Email </th>
                    <th width="12%" align="left" valign="middle">Expertise</th>
                    
                    
                    <th width="6%" align="right" valign="middle">Action</th>
                    <th width="6%" align="left" valign="middle">&nbsp;</th>
                  </tr>
                </thead>
                <tbody>
                    <tr> 
                      <td align="left" valign="middle" id='dynamic_name_1'> Dynamic User1</td>
                      <td align="left" valign="middle" id='dynamic_email_1'>[email protected] 
                      </td>
          <td align="left" valign="middle" id='dynamic_skill_1'>Skill1
          </td>
                       <td align="right" valign="middle">
                              <i class="fa fa-edit" id='90'></i>
                            </td>
                            
                      </tr>
                      
                    <tr> 
                      <td align="left" valign="middle" id='dynamic_name_2'> Dynamic User7</td>
                      <td align="left" valign="middle" id='dynamic_email_7'>[email protected] 
                      </td>
          <td align="left" valign="middle"...

JavaScript

$('.fa-edit').on('click', function() {
//Reverse Method to get the values of the all td
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();
//simple way to get the name of any td onclick
var name1=$(this).parent().siblings(":nth-child(2)").text();
alert(name1);
  });