How to select of the with javascript?

2020-02-09 08:01发布

站内文章 / JavaScript
39 0 0

问题:

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?

回答1:

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!



回答2:

try document.querySelectorAll("#table td");



回答3:

var t = document.getElementById("table"),
    d = t.getElementsByTagName("tr"),
    r = d.getElementsByTagName("td");

needs to be:

var t = document.getElementById("table"),
    tableRows = t.getElementsByTagName("tr"),
    r = [], i, len, tds, j, jlen;

for ( i =0, len = tableRows.length; i<len; i++) {
    tds = tableRows[i].getElementsByTagName('td');
    for( j = 0, jlen = tds.length; j < jlen; j++) {
        r.push(tds[j]);
    }
}

Because getElementsByTagName returns a NodeList an Array-like structure. So you need to loop through the return nodes and then populate you r like above.



回答4:

There begin to appear some answers that assume you want to get all <td> elements from #table. If so, the simplest cross-browser way how to do this is document.getElementById('table').getElementsByTagName('td'). This works because getElementsByTagName doesn't return only immediate children. No loops are needed.



回答5:

There are a lot of ways to accomplish this, and this is but one of them.

$("table").find("tbody td").eq(0).children().first()


回答6:

There are also the rows and cells members;

var t = document.getElementById("tbl");
for (var r = 0; r < t.rows.length; r++) {
    for (var c = 0; c < t.rows[r].cells.length; c++) {
        alert(t.rows[r].cells[c].innerHTML)
    }
}


标签： javascript html-table parent-child
举报

收藏的人(0)

登录 后发表评论
0条评论
还没有人评论过~