5

我有两个这样的表：

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>
<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

他们都是一样的。我必须使用纯 javascript 选择第一个（和第二个）。在 jQuery 中是$(table:first).

如果表是这样的（带类），我可以使用getElementByClassName('class')[0]

<table class="class">
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>
<table class="class">
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>
4

11 回答 11

8

您可以使用：

var firstTable = document.getElementsByTagName("table")[0]

这是跨浏览器兼容的。

对于较新的浏览器，您可以使用：

var firstTable = document.querySelector("table")

这将选择第一个表。

于 2013-01-14T10:23:33.097 回答
5

您可以使用.getElementsByTagName("table")on document，它将返回NodeList包含文档中所有表格的 a。NodeLists 是类似数组的对象，并且表的返回顺序与它们在文档中的顺序相同，因此您可以使用其索引获取第一个元素。

var firstTable = document.getElementsByTagName("table")[0];

节点列表是实时的

值得注意的是，NodeList返回的.getElementsByTagName()是live，这意味着如果您在调用 之后进行 DOM 操作.getElementsByTagName()，这些操作将反映在您的列表中。

var tables = document.getElementsByTagName("table");
var firstTableBefore = tables[0];

/*
If you then prepend a new table to the body at this point, calling tables[0] 
again will now return the newly added element
*/

var firstTableAfter = tables[0];

// firstTableBefore and firstTableAfter will NOT be the same
于 2013-01-14T10:18:42.333 回答
4

您可以使用getElementsByTagName()来获取表集合并为第一个表使用 0 索引。

firstTable = document.getElementsByTagName('table')[0];
于 2013-01-14T10:18:14.430 回答
3

getElementsByTagName [MDN]返回一个NodeList类似数组的对象。元素按文档顺序返回。您可以通过索引访问每个元素：

var tables = document.getElementsByTagName('table');
// first table: tables[0]
于 2013-01-14T10:18:26.567 回答
3

您可以使用以下方法获取页面上的元素数组：

var tables= document.getElementsByTagName("table");

然后

tables[0]

会给你第一张桌子。

于 2013-01-14T10:18:30.913 回答
2

在您的修改如下：

<table id="first">
  <tr>
     <td></td>
     <td></td>
  </tr>
</table>

<table id="second">
  <tr>
     <td></td>
     <td></td>
  </tr>
</table>

在您的 js 代码中：

var table1=document.getElementByID("first");
于 2013-01-14T10:25:08.830 回答
2

您可以将此代码用于您的解决方案

<html> 
 <head><title>hello</title>
 </head>
 <body>

     <table> 
        <tr>
             <td>click first td(table1)</td></br>
             <td>click second td(table1)</td></br>
        </tr>
    </table>
    <table> 
        <tr>
             <td>first td(table2)</td></br>
             <td>second td(table2)</td></br>
        </tr>
    </table>
    <script>
            var firstTable = document.getElementsByTagName("table")[0];
            //alert(firstTable)

                cells = firstTable.getElementsByTagName('td');

                for (var i=0,len=cells.length; i<len; i++){
                    cells[i].onclick = function(){
                        alert(this.innerHTML);
                    }
                }
    </script>
 </body>
</html>
于 2013-01-14T10:29:56.327 回答
2

要通过 获取第一个表tag，您可以简单地执行以下操作：

var first = document.getElementsByTagName("table")[0];

要通过 获取第一个表class，您可以简单地执行以下操作：

var first = document.getElementsByClassName("class")[0];

小提琴

于 2013-01-14T10:34:48.077 回答
1

使用纯 js，您可以使用不同的 document.getelement 命令获取元素。你在这里寻找的是

document.getElementsByTagName("table")

这将返回一个数组，您可以从那里完成您的工作。

于 2013-01-14T10:20:36.623 回答
1

您可以使用document.getElementsByTagNamejavascript 调用。

对于上面的 HTML：

var allTables = document.getElementsByTagName("table")
alert(allTables.length);

提醒我 2。

然后你可以访问allTables[0]等...

于 2013-01-14T10:20:58.213 回答
0

另一种方法可以做到这一点。

let firstTable = document.querySelectorAll("table")[0];
let secondTable = document.querySelectorAll("table")[1];
<table>
  <tr>
    <td>first td(table1)</td>
    <td>second td(table1)</td>
  </tr>
</table>
<table>
  <tr>
    <td>first td(table2)</td>
    <td>second td(table2)</td>
  </tr>
</table>

于 2019-09-11T07:58:02.290 回答