使用jQuery在HTML表格中选择输入元素的值

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/

Answer 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> 

Answer 2

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> 

Answer 3

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());
}

Answer 4

 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> 

Answer 5

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?