Javascript - get id inside table

Question

How do I output the ID names ok1, ok2, ok3 inside a Javascript function?

<table>
        <tr>
                <td id="col1"><a id="ok1" href="javascript:void(0);">click</a></td>
                <td id="col2"><a id="ok2" href="javascript:void(0);">click</a></td>
                <td id="col3"><a id="ok3" href="javascript:void(0);">click</a></td>
        </tr>
</table>

for example alert(something); outputs ok1

You should set onclick="somehting(this)" and inside the function you will have a reference to the anchor. — Alejandro Ocampo, Sep 14 '15 at 17:53
You probably shouldn't have multiple ids per element http://stackoverflow.com/questions/192048/can-an-html-element-have-multiple-ids — camiblanch, Sep 14 '15 at 17:55
@DanielRosano I want to get all the IDs (`ok1`, `ok2`, `ok3`) inside a javascript function — Milad, Sep 14 '15 at 18:13
@DanielRosano Sorry, but I meant I needed to output the name of the ID inside a javascript function. like: `alert(something);` outputs `ok1` — Milad, Sep 14 '15 at 18:23

Spencer Wieczorek · Accepted Answer · 2015-09-14T18:39:16.263

If you are activating a handler directly on that element, such as onclick you can just do this.id, meaning get the id attribute of the element:

document.getElementById("ok1").onclick = function(){
    console.log(this.id);
}

Fiddle Example - Click the first item, at the id will be shown in the console. The same approach can be done with the other two elements.

Edit To simply get all the elements of <a> inside a table you can do this:

var children = document.querySelectorAll("#myTable tr td a");
for(var i=0; i<children.length; i++) {
    console.log(children[i].id);
}

Note I've changed the HTML, as you might not want to do this for all your tables. So I've added an id to it:

<table id="myTable"> ... </table>

Updated Fiddle

Would you mind reading the question again.. I added a few details and re-explained the issue. — Milad, Sep 14 '15 at 18:26

score 1 · Answer 2 · answered Sep 14 '15 at 18:36

1

Collect all the a tags and loop over it getting the attribute id in the function:

(function () {
    var links = document.getElementsByTagName('a');

    for (var i=0; i<links.length; i++) {
     console.log(links[i].getAttribute('id'));   
    }
})()

answered Sep 14 '15 at 18:36

Michelangelo

5,888
5
31
50

score 0 · Answer 3 · answered Sep 14 '15 at 17:58

0

Since the id is used as a CSS Selector in your .css file you can get the id "ok1" by doing

#ok1 {
    ...
}

answered Sep 14 '15 at 17:58

Kamil Patena

65
6

No, I needed the `ok1` value. – Milad Sep 14 '15 at 17:59
would you please read the question again, I edited the description – Milad Sep 14 '15 at 18:16

score 0 · Answer 4 · answered Sep 14 '15 at 18:09

0

use onClick event

<td id="col1"><a id="ok1" href="javascript:void(0);" onclick="clickFun(this)">click</a></td>

see this link

answered Sep 14 '15 at 18:09

Sandeep

1,461
13
26

do you mind reading the question again, I added a few details. – Milad Sep 14 '15 at 18:25

score 0 · Answer 5 · answered Sep 14 '15 at 18:34

0

ok see this Code it's work perfect. Hope you satisfy....

var parent_ = this_.parentNode.parentNode.querySelectorAll("a");

for(var i=0; i<parent_.length; i++)
{
  alert(parent_[i].getAttribute("id"));
}

see this link

answered Sep 14 '15 at 18:34

Sandeep

1,461
13
26

Javascript - get id inside table

5 Answers5