select value of input element inside html table using jquery

Question

I have an html table with n number of rows and 4 columns. Inside each row td I have 2 children elements- label and an input. I want to check the value of input under 2nd td when an onblur event occurs at input under 3rd td.

I want to alert the value of input under 2nd td (ie; headers="ACNO" ) when onblur occurs at input under 3rd td (ie;headers="CREDIT") . So I wrote the below javascript function sum_cr() as

function sum_cr() {
  alert('Hi');
  alert($(pThis).parent().eq(2).children('accno').val());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tbody>
    <tr>
      <td headers="DAYDT">
        <label for="f01_0050" class="u-VisuallyHidden"> </label>
        <input name="f01" value="28-05-2018" type="text">
      </td>
      <td headers="ACNO">
        <label for="f03_0050" class="u-VisuallyHidden"> </label>
        <input name="f03" value="1413/4" class="accno" type="text">
      </td>
      <td headers="CREDIT">
        <label for="f04_0050" class="u-VisuallyHidden"></label>
        <input name="f04" value="100" class="cr_amt" onblur="sum_cr();" id="f04_0050" type="text">
      </td>
      <td headers="FINE AMT">
        <label for="f06_0050" class="u-VisuallyHidden"> </label>
        <input name="f06" value="" id="f06_0050" type="text">
      </td>
    </tr>
  </tbody>
</table>

But my javascript code fails. Can anybody help me to get the value?

JSfiddle: https://jsfiddle.net/nidheeshmtr/nmku2gq1/4/

Sree · Accepted Answer · 2018-05-29 07:47:13Z

1

function sum_cr(ele) {

  alert('Hi')
  alert('using prev(): '+$(ele).parent('td').prev('td').find('input').val());
  //or you can use below for input value under 2nd td element
  alert('using nth-child(): '+$('tr td:nth-child(2)').find('input').val());
  //if you know attributes of TD tag, u can use below
  alert('using attribute selector: '+$('td[headers="ACNO"]').find('input').val());
  //by using siblings, get the parent 2nd sibling
  alert('using siblings(): '+$(ele).parent().siblings(':nth-child(2)').find('input').val());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td headers="DAYDT">
        <label for="f01_0050" class="u-VisuallyHidden"> </label>
        <input name="f01" value="28-05-2018" type="text">
      </td>
      <td headers="ACNO">
        <label for="f03_0050" class="u-VisuallyHidden"> </label>
        <input name="f03" value="1413/4" class="accno" type="text">
      </td>
      <td headers="CREDIT">
        <label for="f04_0050" class="u-VisuallyHidden"></label>
        <input name="f04" value="100" class="cr_amt" onblur="sum_cr(this);" id="f04_0050" type="text">
      </td>
      <td headers="FINE AMT">
        <label for="f06_0050" class="u-VisuallyHidden"> </label>
        <input name="f06" value="" id="f06_0050" type="text">
      </td>
    </tr>
  </tbody>
</table>

edited May 29, 2018 at 7:47

answered May 29, 2018 at 6:31

Sree

3742 silver badges10 bronze badges

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

2 Comments

Nidheesh Over a year ago

Is there any method to select nth sibling?

Sree Over a year ago

yes, I have edited the answer using siblings also.. check once

Mamun · Accepted Answer · 2018-05-29 06:35:37Z

Your selector is not valid. You have to pass this in the function call. Try the following way:

function sum_cr(that) {
  alert($(that).parent('td').prev('td').find('input').val());
}

Run code snippetExpand snippet
I want to alert the value of input under 2nd td (ie; headers="ACNO" ) when onblur occurs at input under 3rd td(ie;headers="CREDIT") . So I wrote the below javascript function sum_cr() as

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td headers="DAYDT">
        <label for="f01_0050" class="u-VisuallyHidden"> </label>
        <input name="f01" value="28-05-2018" type="text">
      </td>
      <td headers="ACNO">
        <label for="f03_0050" class="u-VisuallyHidden"> </label>
        <input name="f03" value="1413/4" class="accno" type="text">
      </td>
      <td headers="CREDIT">
        <label for="f04_0050" class="u-VisuallyHidden"></label>
        <input name="f04" value="100" class="cr_amt" onblur="sum_cr(this);" id="f04_0050" type="text">
      </td>
      <td headers="FINE AMT">
        <label for="f06_0050" class="u-VisuallyHidden"> </label>
        <input name="f06" value="" id="f06_0050" type="text">
      </td>
    </tr>
  </tbody>
</table>

toTheRescue · Accepted Answer · 2018-05-29 06:47:48Z

1

The context is not valid...
Pass the 'this' context from html code to the sum_cr() method as a parameter and define the method as follows.

function sum_cr(that) {
  alert($(that).parent('td').prev('td').find('input').val());
}

answered May 29, 2018 at 6:47

toTheRescue

212 bronze badges

1 Comment

Nidheesh Over a year ago

Is there any method to select nth sibling?

Therichpost · Accepted Answer · 2018-05-29 06:51:59Z

1

function sum_cr(ele) {

 alert($('tr td:nth-child(2) input').val());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td headers="DAYDT">
        <label for="f01_0050" class="u-VisuallyHidden"> </label>
        <input name="f01" value="28-05-2018" type="text">
      </td>
      <td headers="ACNO">
        <label for="f03_0050" class="u-VisuallyHidden"> </label>
        <input name="f03" value="1413/4" class="accno" type="text">
      </td>
      <td headers="CREDIT">
        <label for="f04_0050" class="u-VisuallyHidden"></label>
        <input name="f04" value="100" class="cr_amt" onblur="sum_cr(this);" id="f04_0050" type="text">
      </td>
      <td headers="FINE AMT">
        <label for="f06_0050" class="u-VisuallyHidden"> </label>
        <input name="f06" value="" id="f06_0050" type="text">
      </td>
    </tr>
  </tbody>
</table>

answered May 29, 2018 at 6:51

Therichpost

1,8132 gold badges15 silver badges19 bronze badges

4 Comments

Nidheesh Over a year ago

Is there any method to select nth sibling?

Therichpost Over a year ago

yes, you can try, this is just ecample: $('.cr_amt').closest('td').siblings().find('input').val();

Nidheesh Over a year ago

I tried $('.cr_amt').closest('td').siblings().find('.accno').val(); but failed when more than 1 row. It shows only first row's cell value

Therichpost Over a year ago

okay fine. well I am blogger and you can check my blog as well therichpost

Adesh Kumar · Accepted Answer · 2018-05-29 06:41:39Z

You can define an ID for each input and then get their value as you want

function sum_cr() {
var elem = $('#xyz').val();
  alert(elem);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td headers="DAYDT">
        <label for="f01_0050" class="u-VisuallyHidden"> </label>
        <input name="f01" value="28-05-2018" type="text">
      </td>
      <td headers="ACNO">
        <label for="f03_0050" class="u-VisuallyHidden"> </label>
        <input id="xyz" name="f03" value="1413/4" class="accno" type="text">
      </td>
      <td headers="CREDIT">
        <label for="f04_0050" class="u-VisuallyHidden"></label>
        <input name="f04" value="100" class="cr_amt" onblur="sum_cr();" id="f04_0050" type="text">
      </td>
      <td headers="FINE AMT">
        <label for="f06_0050" class="u-VisuallyHidden"> </label>
        <input name="f06" value="" id="f06_0050" type="text">
      </td>
    </tr>
  </tbody>
</table>

Check whether this helps or not?

Collectives™ on Stack Overflow

select value of input element inside html table using jquery

5 Answers 5

2 Comments

Comments

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related