JavaScript (czysty) wybrać pierwszy element (tabela)

Mam dwie tabele jak tenJavaScript (czysty) wybrać pierwszy element (tabela)

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

wszystkie są takie same. Muszę wybrać pierwszy (i drugi) używając czystego javascript. W jQuery jest to $(table:first).

muszę czystym JavaScript

Edit coś przeoczyć, kiedy pytam.

Jeśli stoły były tak (z ćwiczeniami) mogłaby używać getElementByClassName('class')[0]

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

Źródło

2013-01-14 AMD

Potrzebujemy więcej informacji na temat znaku do identyfikacji tablic poprawnie tzn jest tam pojemnik wokół niego ? Czy te tabele są zawsze pierwszą i drugą tabelą na stronie? – Amberlamps

zobacz swoje rozwiązanie poniżej, używając czystego javascript –

Możesz użyć .getElementsByTagName("table") na document, który zwróci NodeList zawierający wszystkie tabele w dokumencie. NodeLists są obiektami podobnymi do tablic, a tabele są zwracane w takiej kolejności, w jakiej występują w dokumencie, więc możesz wtedy po prostu wziąć pierwszy element za pomocą jego indeksu.

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

NodeLists są żywo

Warto zauważyć, że NodeList zwrócony przez .getElementsByTagName() jest żywo, co oznacza, że jeśli DOM-manipulacje po wywołaniu .getElementsByTagName() te manipulacje będzie znaleźć się na twojej liście.

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

Źródło

2013-01-14 10:18:42

Można użyć getElementsByTagName() aby uzyskać zbiór tabel i wykorzystywać indeks 0 dla pierwszej tabeli.

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

Źródło

2013-01-14 10:18:14 Adil

Powód głosowania w dół? – Adil

'table' nie było w cudzysłowach. Usunięto go teraz. – Amberlamps

Nieodebrane, dziękuję za wyjaśnienie przyczyny. – Adil

getElementsByTagName^[MDN] zwraca NodeList która jest przedmiotem Tablica podobne. Elementy są zwracane w porządku dokumentu. Można po prostu dostęp do każdego elementu o indeksie:

var tables = document.getElementsByTagName('table'); 
// first table: tables[0]

Źródło

2013-01-14 10:18:26

można uzyskać tablicę elementów na stronie za pomocą:

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

Następnie

tables[0]

daje pierwszy stół.

Źródło

2013-01-14 10:18:30 cowls

Używanie czystego js pozwala uzyskać elementy za pomocą różnych poleceń document.getelement. To, czego szukasz, to:

Spowoduje to wyświetlenie tablicy, a Ty będziesz mógł wykonywać swoją pracę.

Źródło

2013-01-14 10:20:36 SBI

Można użyć wywołania javascript document.getElementsByTagName.

Dla HTML jak powyżej:

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

alarmuje mi 2.

następnie można uzyskać dostęp allTables[0] etc ...

Źródło

2013-01-14 10:20:58 ryadavilli

Można użyć:

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

, który jest kompatybilny z wieloma przeglądarkami.

Dla nowszych przeglądarek można użyć:

var firstTable = document.querySelector("table")

który wybierze pierwszą tabelę.

Źródło

2013-01-14 10:23:33 97ldave

W swojej Zmienić następujące:

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

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

w kodzie JS:

var table1=document.getElementByID("first");

Źródło

2013-01-14 10:25:08

można wykorzystać ten kod do rozwiązania

<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>

Źródło

2013-01-14 10:29:56

Aby uzyskać pierwszą tabelę tag, możesz to zrobić po prostu:

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

zdobyć pierwszy stolik class, można po prostu to zrobić:

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

FIDDLE

Źródło

2013-01-14 10:34:48

JavaScript (czysty) wybrać pierwszy element (tabela)

Odpowiedz

Powiązane problemy