Jquery Get Closest Td Text Value

$(".assign-card").on("click", function() {  alert($(this).closest('tr').find('.cardSerialNumber').val());});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table>  <tbody>    <tr>      <td class="text-center"><input type="text" class="form-control cardSerialNumber"></td>      <td class="text-center"><button type="button" class="btn btn-success assign-card"><span style="color : white" class="glyphicon glyphicon-check">Assign</span></button>      </td>    </tr>    <tr>      <td class="text-center"><input type="text" class="form-control cardSerialNumber"></td>      <td class="text-center"><button type="button" class="btn btn-success assign-card"><span style="color : white" class="glyphicon glyphicon-check">Assign</span></button>
      </td>    </tr>  </tbody></table>

how to insert data to a closest td with jQuery?

.find() looks for the selector in the descendants of input, not the parents. So you need to use $(this).closest('td').

Then, you can use .siblings() like this:

$(this).closest('td').siblings('td.z').text(val);

or

get the nearest tr, and look for a td with z class:

$(this).closest('tr').find('td.z').text(val);

I want to find the closest td when button in that tr is clicked

The issue is because you're using a class selector to find all the .loginID and .loginPassword elements.

Instead you can fix the logic by using the this keyword to reference the element that raised the event. From there you can use closest('tr') to get the row, and find() to select the required elements. Also note that you don't need the each() call. You can apply click() directly to the collection of all .jsLoginButton elements. Try this:

var configuration = {  loginPage: {}}
$(document).ready(function() {  $(".jsLoginButton").click(function() {    var $tr = $(this).closest('tr');
    configuration.loginPage.LOGIN_ID = $tr.find('.loginID').text();    configuration.loginPage.LOGIN_PASSWORD = $tr.find('.loginPassword').text()
    console.log(configuration);  });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table>  <thead>    <tr>      <th style="padding: 3px">Username</th>      <th style="padding: 3px">Password</th>      <th style="padding: 3px">Action</th>    </tr>  </thead>  <tr>    <td style="padding: 3px" class="loginID">abc.user1@gmail.com</td>    <td style="padding: 3px" class="loginPassword">Asdf1234!</td>    <td style="padding: 3px">      <button class="jsLoginButton">login</button>    </td>  </tr>  <tr>    <td style="padding: 3px" class="loginID">xyz@gmail.com</td>    <td style="padding: 3px" class="loginPassword">Asdf1234!</td>    <td style="padding: 3px">      <button class="jsLoginButton">login</button>    </td>  </tr></table>

var td = $(row).closest('tr').find('td.cvrnummer');

$(this).closest('table').find('tr:contains("cat"):lt('+$(this).closest('tr').index()+'):last').find('td:eq(2)').text();  

jQuery(function($) {  //use jQuery event handlers  $('.A').change(function() {    //find the element in the same row and update    $(this).closest('tr').find('.B').val((this.value / 2) || 0)  });  $('.B').change(function() {    $(this).closest('tr').find('.A').val((this.value * 2) || 0)  });})

<script src="http://code.jquery.com/jquery-latest.min.js"></script><table>  <tr>    <td>      <input class="A" value="0" />    </td>    <td>      <input class="B" value="0" />    </td>  </tr>  <tr>    <td>      <input class="A" value="0" />    </td>    <td>      <input class="B" value="0" />    </td>  </tr></table>