Get value from table by button click (JS)

Question

I have table in my view

Here is code

<tbody id="findings" style="overflow-y: scroll;">
  @foreach (var item in Model) {
  <tr>

    <td style="display: none" id="patientId" class="title">
      @Html.DisplayFor(modelItem => item.Patient_id)
    </td>
    <td class="title appdate">
      @Html.DisplayFor(modelItem => item.Start_appointment)
    </td>
    <td id="nameVal" class="title">
      @Html.DisplayFor(modelItem => item.Patient.Name)
    </td>

    <td class="title">
      <img src="@item.Calculation.CalculationStatus" />
    </td>

    <td class="title">
      <img style="width: 30px; height: 30px;" class="open_calculation" src="~/images/icons8-Document-30.png" />
    </td>
  </tr>
  }
</tbody>

I need to get value from

<td class="title appdate">
  @Html.DisplayFor(modelItem => item.Start_appointment)
</td>

via button click open_calculation

How I can do this correctly via js?

Thank's for help.

If you're going to use jQuery, as you've tagged it, then you need these methods: click(), closest(), find(), text() — Rory McCrossan
– Rory McCrossan, Commented Dec 12, 2017 at 9:58
Like this var date = $(this).find("tr").closest('.appdate').text(); ? @RoryMcCrossan — Old Balance
– Old Balance, Commented Dec 12, 2017 at 10:00
Yes, exactly like that - just make sure you execute that code in a click event handler. — Rory McCrossan
– Rory McCrossan, Commented Dec 12, 2017 at 10:02
That is not correct, if this is a td. open_calculation you'll need to use something like $(this).parent("tr").find(".appdate").text(). — Titus
– Titus, Commented Dec 12, 2017 at 10:08

N. Ivanov · Accepted Answer · 2017-12-12 10:00:27Z

1

Easiest way would be:

$(function(){
    $("body").on("click", ".open_calculation", function(){
        $(this).closest("tr").find(".appdate").text();
    });  
});

Hope this helps!

edited Dec 12, 2017 at 10:00

answered Dec 12, 2017 at 9:57

N. Ivanov

1,8332 gold badges17 silver badges28 bronze badges

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

9 Comments

Rory McCrossan Over a year ago

Given the rows are generated in a loop this will get the text of all rows, not the clicked one

Old Balance Over a year ago

It will get it correctly? Because I can have many entries in table?

N. Ivanov Over a year ago

@OldBalance Updated answer, hope this helps!

Old Balance Over a year ago

Seems it not getting text.

N. Ivanov Over a year ago

try .html() instead @OldBalance

|

Old Balance · Accepted Answer · 2017-12-12 10:33:52Z

1

So according to @N.Ivanov answer I need to write code like this.

 $('.open_calculation').click(function() {
    openCalculation(this);
});
 function openCalculation(element) {
    $('#main_window').load('@Url.Action("OpenCalculationPartial", "Calculations")',
        function () {
           var date = "Finding from" + " " + $(element).closest("tr").find("#appdate").text().trim();
           $("#appointmentDate").text(date);
        });
}

Where was problem.

I use this in function, but this context in function are different.

So code this code isn't right:

  $('.open_calculation').click(function() {
    openCalculation();
});
 function openCalculation(element) {
    $('#main_window').load('@Url.Action("OpenCalculationPartial", "Calculations")',
        function () {
           var date = "Finding from" + " " + $(element).closest("tr").find("#appdate").text().trim();
           $("#appointmentDate").text(date);
        });
}

answered Dec 12, 2017 at 10:33

Old Balance

498 bronze badges

2 Comments

Titus Over a year ago

You can just use $('.open_calculation').click(openCalculation); and this will be the clicked element.

Old Balance Over a year ago

Yeah. Thank's@Titus

Collectives™ on Stack Overflow

Get value from table by button click (JS)

2 Answers 2

9 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related