Javascript (puro) selezionare primo elemento (tabella)

Ho due tabelle come questoJavascript (puro) selezionare primo elemento (tabella)

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

Sono tutti uguali. Devo selezionare il primo (e il secondo) usando puro javascript. In jQuery è $(table:first).

ho bisogno di puro JavaScript

Modifica persi qualcosa quando si chiede.

Se tavoli erano come questo (con le classi) ho potuto utilizzare getElementByClassName('class')[0]

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

fonte

2013-01-14 AMD

Abbiamo bisogno di maggiori informazioni sul mark up di identificare correttamente cioè i tavoli c'è un contenitore intorno ad esso ? Le tabelle sono sempre il primo e il secondo tabellone sulla pagina? – Amberlamps

vedi la tua soluzione qui sotto usando puro javascript –

È possibile utilizzare .getElementsByTagName("table") su document, che restituirà un NodeList contenente tutte le tabelle all'interno del documento. Le NodeList sono oggetti di tipo array e le tabelle vengono restituite nello stesso ordine in cui si trovano nel documento, quindi puoi semplicemente prendere il primo elemento usando il suo indice.

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

NodeLists sono vivo

Vale la pena notare che il NodeList restituito da .getElementsByTagName() è vivo, il che significa che se si fa Dom-manipolazioni dopo la vostra chiamata a .getElementsByTagName(), queste manipolazioni sarà si rifletta nella tua lista.

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

fonte

2013-01-14 10:18:42

È possibile utilizzare getElementsByTagName() per ottenere l'insieme di tabelle e utilizzare 0 indice per prima tabella.

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

fonte

2013-01-14 10:18:14 Adil

Motivo per voti bassi? – Adil

'table' non era tra virgolette. Rimosso ora. – Amberlamps

Manca, grazie per averne detto il motivo. – Adil

getElementsByTagName^[MDN] restituisce un NodeList che è un oggetto array simile. Gli elementi vengono restituiti nell'ordine del documento. Si può semplicemente accedere a ciascun elemento per il suo indice:

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

fonte

2013-01-14 10:18:26

è possibile ottenere una serie di elementi sulla vostra pagina utilizzando:

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

Poi

tables[0]

vi darà la primo tavolo

fonte

2013-01-14 10:18:30 cowls

Utilizzando js puro, è possibile ottenere elementi utilizzando i diversi comandi document.getelement. Quello che stai cercando qui è

document.getElementsByTagName("table")

Questo restituirà un array, e puoi fare il tuo lavoro da lì.

fonte

2013-01-14 10:20:36 SBI

È possibile utilizzare la chiamata javascript document.getElementsByTagName.

Per il codice HTML di cui sopra:

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

avvisa l'utente 2.

Poi si può accedere allTables[0] ecc ...

fonte

2013-01-14 10:20:58 ryadavilli

È possibile utilizzare:

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

che è compatibile con browser diversi.

Per i browser più recenti è possibile utilizzare:

var firstTable = document.querySelector("table")

che selezionerà la prima tabella.

fonte

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

Nel vostro Modificare come segue:

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

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

Nel codice js:

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

fonte

2013-01-14 10:25:08

è possibile utilizzare questo codice per la soluzione

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

fonte

2013-01-14 10:29:56

Per ottenere il primo tavolo da tag, è sufficiente fare questo:

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

per ottenere il primo tavolo da class, si può semplicemente fare questo:

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

FIDDLE

fonte

2013-01-14 10:34:48

Javascript (puro) selezionare primo elemento (tabella)

risposta

Problemi correlati