how can get span id from table data in jquery

Question

I have a table tr and td . In between the table data there is a span that I want to take the ID from.

In my jquery code, it's not returning any value from span id.

How can get span id?

My 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>

My jQuery

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

Answer 1

Use jQuery's attr method:

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

This allows you to take any attribute from any jQuery object element and return its value.

More info in the jQuery attr() Docs

Answer 2

您可以使用Element的id属性

var a = this.id;

Answer 3

in jQuery, us the attr function to get attributed from HTML elements. http://api.jquery.com/attr/

See working example using your code: https://jsfiddle.net/e2vonuor/

Answer 4

The problem is that you're chaining a non-existent method to a jQuery's $(this) object, id is neither a function nor a method, in either jQuery or DOM: it's a property, of an HTMLElement. So, instead use a valid jQuery method to retrieve the property:

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

Although you could, certainly, also use attr() in place of prop() :

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

Or use the DOM:

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

Answer 5

You can simply pass the this in your subtract function:

 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> 

Another solution is using 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 6

You either use the inline "onclick" in which case you can send the actual element as a parameter:

<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);
}

Or you set the click functionality in the document ready:

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

I also recommend you debug using console.log instead of the alert function. But this is a matter of preference.