5

私はこのような2つのテーブルを持っています：

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

それらはすべて同じです。純粋なJavaScriptを使用して最初のもの（および2番目のもの）を選択する必要があります。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")使用できます。NodeLists は配列のようなオブジェクトであり、テーブルはドキュメント内と同じ順序で返されるため、インデックスを使用して最初の要素を取得できます。documentNodeList

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

NodeList はライブです

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は、配列のようなオブジェクトであるa を返し要素はドキュメント順に返されます。インデックスで各要素に簡単にアクセスできます。

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

このコードをソリューションに使用できます

<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

To get the first table by tag, you can simply do this:

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

To get the first table by class, you can simply do this:

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

FIDDLE

于 2013-01-14T10:34:48.077 に答える
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 に答える
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 に答える