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?
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>
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>
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());
}
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>
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?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.