如何從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。但這是一個偏好問題。