How to get previous tag (td) child attribute value using jquery?
Question
How to get previous td child attribute value using jquery? I am getting undefined while using my code, can you suggest or find whats wrong in my code.
This is my code, I am trying to get the attribute of previous td child from current td input, kindly see the below and suggest me the solution.
HTML
<html>
<head><title>I am a beginner</title></head>
<body>
<table><thead/><tbody>
<td><input name="1sttextbox" type="text" value="10/22/2015" id="1"/></td>
<td><input name="2ndtextbox" type="text" value="10/23/2015" id="2"/></td>
<td><input name="3rdtextbox" type="text" value="10/21/2015" id="3"/></td>
</tr></tbody>
</table>
</body>
</html>
Jquery
$(function() {
var input=$("input[type='text']");
input.blur(function() {
var val1=$(this).val();
var val2 = $(this).closest('td').prev('td input').attr('value');
alert(val1);
alert(val2);
return false;
});
4 answers
solution1
1 ACCPTED 2015-12-08 07:10:15
You can use find with result returned by prev, instead of using descendant selector syntax in prev. Your code alose does not have closing }) for blur handler.
var val2 = $(this).closest('td').prev('td').find('input').attr('value');
As you are binding element to all inputs, the first input wont have prev input so you need to take care of that as well.
To check if you get the prev element you can use type of to identify if you get undefined.
console.log(typeof val2 == 'undefined' ? 'no previous element' : val2);
solution2
1 2015-12-08 07:13:56
Created this fiddle
$(function() {
var input=$("input[type='text']");
input.blur(function() {
var val1=$(this).val();
var val2 = $(this).closest('td').prev().find("input").attr('value');
alert(val1);
alert(val2);
return false;
}) });
Edited the fiddle to check if the input is first td so that undefined is not displayed
$(function() {
var input=$("input[type='text']");
input.blur(function() {
var val1=$(this).val();
alert(val1);
if ( $(this).closest('td').index() > 0 )
{
var val2 = $(this).closest('td').prev().find("input").val();
alert(val2);
}
return false;
}) });
solution3
1 2015-12-08 07:20:07
You can get previous input value like:
var val2 = $(this).parent('td').prev('td').children('input').val();
solution4
1 2015-12-08 07:24:48
Try either adding closing </thead> or removing <thead> , including }) at close of $(function() {}) ; using $("> input", this.parentElement.previousElementSibling) to select previous input element . Note , if input is at index 0 would return undefined ; included check for previous input being undefined , in which instance , alert #1 id
$(function() { var input = $("input[type='text']"); input.blur(function() { var val1 = $(this).val(); var val2 = $("> input", this.parentElement.previousElementSibling); alert(val1); alert(val2.length && val2.val() || this.id); return false; }); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <html> <head> <title>I am a beginner</title> </head> <body> <table> <tbody> <td> <input name="1sttextbox" type="text" value="10/22/2015" id="1" /> </td> <td> <input name="2ndtextbox" type="text" value="10/23/2015" id="2" /> </td> <td> <input name="3rdtextbox" type="text" value="10/21/2015" id="3" /> </td> </tr> </tbody> </table> </body> </html>
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.