Question

199

How to select < td> of the < table> with javascript?

rated 0 times [ 200] [ 1] / answers: 1 / hits: 149643 / 13 Years ago, wed, december 14, 2011, 12:00:00

I know this is very easy question, but I couldn't find the answer anywhere. Only answers are the ones using jQuery, not pure JS. I've tried the code below and it doesn't work. I don't know why.

var t = document.getElementById(table),

    d = t.getElementsByTagName(tr),

    r = d.getElementsByTagName(td);

This also doesn't work:

var t = document.getElementById(table),

    d = t.getElementsByTagName(tr),

    r = d.childNodes;

What am I doing wrong? What is the best way to do this?

EDIT:
I indeed have the id of my table table. Preety silly I know. This is how my HTML looks:

<table id=table>

            <tr>

                <td id=c1>1</td>

                <td id=c2>2</td>

                <td id=c3>3</td>

            </tr>

            <tr>

                <td id=b1>4</td>

                <td id=b2>5</td>

                <td id=b3>6</td>

            </tr>

            <tr>

                <td id=a1>7</td>

                <td id=a2>8</td>

                <td id=a3>9</td>

            </tr>

</table>

To explain my intentions more clearly > I wish to make a tic tac toe game. For starters, I wish to click on the < td > and be able extract the id of that particular < td >. How to do it most efficiently?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

blair

Add To Favorites

Follow

Total Points: 384

Total Questions: 108

Total Answers: 86

Location: Northern Ireland

Member since Tue, May 5, 2020

4 Years ago

answered 13 Years ago jennie · Accepted Answer

This d = t.getElementsByTagName(tr) and this r = d.getElementsByTagName(td) are both arrays. The getElementsByTagName returns an collection of elements even if there's just one found on your match.

So you have to use like this:

var t = document.getElementById(table), // This have to be the ID of your table, not the tag

    d = t.getElementsByTagName(tr)[0],

    r = d.getElementsByTagName(td)[0];

Place the index of the array as you want to access the objects.

Note that getElementById as the name says just get the element with matched id, so your table have to be like <table id='table'> and getElementsByTagName gets by the tag.

EDIT:

Well, continuing this post, I think you can do this:

var t = document.getElementById(table);

var trs = t.getElementsByTagName(tr);

var tds = null;



for (var i=0; i<trs.length; i++)

{

    tds = trs[i].getElementsByTagName(td);

    for (var n=0; n<tds.length;n++)

    {

        tds[n].onclick=function() { alert(this.innerHTML); }

    }

}

Try it!