如何使用jquery获取以前的td子属性值?我在使用我的代码时未定义,你可以在我的代码中建议或发现什么错误。
这是我的代码,我试图从当前的td输入中获取前一个td子项的属性,请看下面并建议我解决方案。
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;
});
答案 0 :(得分:1)
您可以将find
与prev返回的结果一起使用,而不是在prev中使用后代选择器语法。对于模糊处理程序,你的代码alose没有关闭}。
var val2 = $(this).closest('td').prev('td').find('input').attr('value');
由于你是所有输入的绑定元素,第一个输入不会有上一个输入,所以你也需要处理它。
<强> Live Demo 强>
要检查是否获得了prev元素,可以使用type of来识别是否未定义。
console.log(typeof val2 == 'undefined' ? 'no previous element' : val2);
答案 1 :(得分:1)
创建了此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;
}) });
编辑fiddle以检查输入是否是第一个td,以便不显示未定义
$(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;
}) });
答案 2 :(得分:1)
答案 3 :(得分:1)
尝试在</thead>
附近添加结束<thead>
或删除})
,包括$(function() {})
;使用$("> input", this.parentElement.previousElementSibling)
选择以前的input
元素。请注意,如果input
位于索引0
,则返回undefined
;包含对input
之前undefined
的检查,例如,提醒#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>