[英]How to select a element in the clicked table row of a HTML table using Jquery?
[英]select value of input element inside html table using jquery
我有一个具有n行数和4列的html表。 在每行td
我有2个子元素label
和一个input
。 当在3rd td
下的input
发生onblur
事件时,我想检查2nd td
下的input
值。
我想提醒在第二个td
下input
的值(即headers =“ ACNO”),当在第三个td
下的输入出现onblur
时(即headers =“ CREDIT”)。 所以我写了下面的javascript函数sum_cr()
作为
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>
但是我的JavaScript代码失败。 有人可以帮助我获得价值吗?
JSfiddle: https ://jsfiddle.net/nidheeshmtr/nmku2gq1/4/
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>
您的选择器无效。 您必须在函数调用中传递this
。 请尝试以下方式:
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>
您可以为每个输入定义一个ID,然后根据需要获取其值
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>
检查是否有帮助?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.