index class in different rows in jquery

Question

I have a table with buttons on each row. I am trying to click on a button on a particular and it picks the value .claim_value field of the same row and put the value in the td opposite it .vet_value.

Here's my code

<table id="tasks" class="col-md-12 table">
    <thead>
        <tr>
          <td>Service</td>
          <td>Key notes</td>
          <td>Claim Amount</td>
          <td>Vetted Amount</td>
        </tr>
    </thead>
    <tbody>
        <tr class="therow">
          <td class="claim_value">hey</td>
          <td class="vet_value"></td>
          <button class="button">button</button>
        </tr>
        <tr class="therow">
          <td class="claim_value">you</td>
          <td class="vet_value"></td>
          <button class="button">button</button>
        </tr>
        <tr class="therow">
          <td class="claim_value">me</td>
          <td class="vet_value"></td>
          <button class="button">button</button>
        </tr>
        <tr class="therow">
          <td class="claim_value">them</td>
          <td class="vet_value"></td>
          <button class="button">button</button>
        </tr>
    </tbody>    
</table>

so i want to be able to click on class="button"

$(".button").click(function(){
  (".claim_value").val() of this same row goes into (".vet_value").val()
});

Mohammad · Accepted Answer · 2017-06-10 19:47:03Z

1

Just call parent() to access the parent <tr> element and modify <td> from there

$(".button").click(function(){
    var $parent=$(this).parent();
    var claimValue=$parent.find(".claim_value").text();
    $parent.find(".vet_value").text(claimValue);
});

edited Jun 10, 2017 at 19:47

Mohammad

21.5k16 gold badges58 silver badges86 bronze badges

answered Jun 10, 2017 at 19:22

Nhon Dinh

2211 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohamed-Yousef · Accepted Answer · 2017-06-10 19:13:17Z

0

you don't need to use .val() unless the element is input or textarea

with td use .text() also you need to use $(this) to refer to the button you clicked and closest('tr') to select the closest row then .find() to find the element with class you want

$(".button").click(function(){
     var claim_value = $(this).closest('tr').find(".claim_value").text();
     $(this).closest('tr').find(".vet_value").text(claim_value);
});

answered Jun 10, 2017 at 19:13

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

Comments

jafarbtech · Accepted Answer · 2017-06-10 19:15:31Z

0

Use html() that is not val(). Insert td inside which has to be the direct child of tr. As val() only comes for input and textarea.

$(".button").click(function(){
  alert($(this).closest('tr').find(".claim_value").html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tasks" class="col-md-12 table">
    <thead>
        <tr>
          <td>Service</td>
          <td>Key notes</td>
          <td>Claim Amount</td>
          <td>Vetted Amount</td>
        </tr>
    </thead>
    <tbody>
        <tr class="therow">
          <td class="claim_value">hey</td>
          <td class="vet_value"></td>
          <td>
          <button class="button">button</button>
          </td>
        </tr>
        <tr class="therow">
          <td class="claim_value">you</td>
          <td class="vet_value"></td>
          <td>
          <button class="button">button</button>
          </td>
        </tr>
        <tr class="therow">
          <td class="claim_value">me</td>
          <td class="vet_value"></td>
          <td>
          <button class="button">button</button>
          </td>
        </tr>
        <tr class="therow">
          <td class="claim_value">them</td>
          <td class="vet_value"></td>
          <td>
          <button class="button">button</button>
          </td>
        </tr>
    </tbody>    
</table>

answered Jun 10, 2017 at 19:15

jafarbtech

7,0551 gold badge41 silver badges60 bronze badges

3 Comments

Kannan T Over a year ago

Can we use parent instead of closest? that will work too right?

jafarbtech Over a year ago

We can. But the latest jquery uses closest

Mohamed-Yousef Over a year ago

@kannan * the parent() method traverses to the immediate parent of each of these elements in the DOM tree and constructs a new jQuery object from the matching elements.This method is similar to .parents(), except .parent() only travels a single level up the DOM tree* .. Some think like .find() and .children() .find() find any element in tree but .children() the direct child the DOM tree .. So on this OP code case we can use .parent() cause we need to just travels a single level up

Collectives™ on Stack Overflow

index class in different rows in jquery

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related