如何使用jquery获取以前的tag(td)子属性值?

时间:2015-12-08 07:09:01

标签: javascript jquery html

如何使用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;
});

4 个答案:

答案 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)

您可以获得以前的输入值,如:

 var val2 = $(this).parent('td').prev('td').children('input').val();

Working Fiddle

答案 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>