如何从jQuery中的表数据获得跨度ID

Question

我有一个tabletr和td。在表格数据之间有一个span，我想从中获取ID。

在我的jQuery代码中，它没有从span id返回任何值。

怎样才能得到span id？

我的HTML

<table border="1" id="t1"> 
    <tr> 
     <td> 
      <span class="f1" id="111" onclick="subtract();">Subtract</span> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <span class="f2" id="222" onclick="subtract();">Subtract</span> 
     </td> 
    </tr> 
</table> 

我的jQuery

$(document).ready(function() { 
    $("#t1 span").click(function() { 
     var a = $(this).id(); 
     alert(a); 
    }); 
}); 

Answer 1

您只需在subtract函数中通过this即可：

function subtract(element) { 
 
    var a = element.id 
 
    console.log(a); 
 
}

<table id="t1" border="1"> 
 
    <tr> 
 
     <td><span id="111" class="f1" onclick="subtract(this);">Subtract</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td><span id="222" class="f2" onclick="subtract(this);">Subtract</span></td> 
 
    </tr> 
 
</table>

另一种解决方案是使用jQuery .attr()：

$('table#t1 span').click(function() { 
 
    var a = $(this).attr('id'); 
 
    console.log(a); 
 
});

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<table id="t1" border="1"> 
 
    <tr> 
 
     <td><span id="111" class="f1">Subtract</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td><span id="222" class="f2">Subtract</span></td> 
 
    </tr> 
 
</table>

Answer 2

使用jQuery的attr方法：

var a = $(this).attr('id'); 

这使您可以采取任何属性来自任何jQuery对象元素并返回其值。在jQuery attr() Docs

Answer 3

更多信息您可以使用jQuery的元素

var a = this.id; 

Answer 4

的id财产，我们attr函数来获取从HTML元素归属。 http://api.jquery.com/attr/

使用你的代码中看到工作示例：https://jsfiddle.net/e2vonuor/

Answer 5

的问题是，你链接不存在的方法到jQuery的$(this)对象，id既不是函数也不是方法，无论是jQuery的或DOM ：它是HTMLElement的一个属性。所以，而是使用一个有效的jQuery的方法来检索属性：

$(document).ready(function() { 
    $("#t1 span").click(function() { 
     var a = $(this).prop('id'); 
     alert(a); 
    }); 
}); 

虽然你可以，当然，也很到位使用attr()的prop()：

$(document).ready(function() { 
    $("#t1 span").click(function() { 
     var a = $(this).attr('id'); 
     alert(a); 
    }); 
}); 

或者使用DOM：

$(document).ready(function() { 
    $("#t1 span").click(function() { 
     var a = this.id; 
     alert(a); 
    }); 
}); 

Answer 6

您既可以使用内联 “的onclick” 在这种情况下，你可以发送实际的元素作为参数：

<table id="t1" border="1"> 
<tr> 
    <td><span id="111" class="f1" onclick="subtract(this);">Subtract</span></td> 
</tr> 
<tr> 
    <td><span id="222" class="f2" onclick="subtract(this);">Subtract</span></td> 
</tr> 

jQuery的

function substract(spanElement){ 
    var id = $(spanElement).attr("id"); 
    alert(id); 
} 

或者你的文件准备设置的点击功能：

$(document).ready(function() { 
    $("#t1 span").click(function() { 
     var id = $(this).attr("id"); 
     alert(a); 
    }); 
}); 

我也建议你调试使用，而不是报警功能的console.log。但这是一个偏好问题。