CODEWITHSUNDEEP
jqueryhtmlhtml-table
HYUTS
HYUTS

Reputation: 97

Get all td id's from a table

Fellow programmers, I am trying to grab the id's from all td's that I have. I want an event listener recognizes what td I am clicking. I cant figure out how to do it here is my code.

jQuery:

    $("td").click(function() {
        var HYUTS = $("td").attr("id");
        var data = $("#data").val(HYUTS);
    });

HTML:

<table id="tables">
<thead><input id="data" type="text"></thead>
   <tr>
        <td id="1">1</td>
        <td id="2">2</td>
        <td id="3">3</td>
        <td id="clear">C</td>
    </tr>
    <tr>
        <td id="4">4</td>
        <td id="5">5</td>
        <td id="6">6</td>
        <td id="divide">/</td>
    </tr>
    <tr>
        <td id="7">7</td>
        <td id="8">8</td>
        <td id="9">9</td>
        <td id="multiply">*</td>
    </tr>
    <tr>
        <td id="0">0</td>
        <td id="add">+</td>
        <td id="subtract">-</td>
        <td id="equals">=</td>
    </tr>

Thanks.

Upvotes: 0

Views: 2963

Answers (2)

Johan Karlsson
Johan Karlsson

Reputation: 6476

You can access the currently clicked <td> with this in the event handler:

$("td").click(function() { 
    var HYUTS = this.id; 
    var data = $("#data").val(HYUTS);
 });

Upvotes: 0

guradio
guradio

Reputation: 15555

$('#tables').find('tr').find('td').each(function(){

console.log($(this).attr('id'))

})

$('#tables').find('tr').find('td').click(function(){

console.log($(this).attr('id'))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tables">
<thead><input id="data" type="text"></thead>
   <tr>
        <td id="1">1</td>
        <td id="2">2</td>
        <td id="3">3</td>
        <td id="clear">C</td>
    </tr>
    <tr>
        <td id="4">4</td>
        <td id="5">5</td>
        <td id="6">6</td>
        <td id="divide">/</td>
    </tr>
    <tr>
        <td id="7">7</td>
        <td id="8">8</td>
        <td id="9">9</td>
        <td id="multiply">*</td>
    </tr>
    <tr>
        <td id="0">0</td>
        <td id="add">+</td>
        <td id="subtract">-</td>
        <td id="equals">=</td>
    </tr>
  </table>

Try doing like this

Upvotes: 1

Related Questions