Ottieni valori dalla tabella dei campi di testo javascript

Question

Ho un modulo che in realtà è una tabella di campi di testo. Il codice HTML è simile al seguente:

<form> 
    <table id="table"> 
      <tr> 
       <th>Player</th> 
       <th>Number</th> 
       <th>Con.per.day</th> 
       <th>P.100.kg</th> 
       <th>P.day</th> 
       <th>I.month</th> 
      </tr> 

      <tr> 
       <td><input type="text" /></td> 
       <td><input type="text" /></td> 
       <td><input type="text" /></td> 
       <td><input type="text" /></td> 
       <td><input type="text" /></td> 
       <td>Result</td> 
      </tr> 


      <tr> 
       <td><input type="text" /></td> 
       <td><input type="text" /></td> 
       <td><input type="text" /></td> 
       <td><input type="text" /></td> 
       <td><input type="text" /></td> 
       <td>Result</td> 
      </tr> 


      <tr> 
       <td><input type="text" /></td> 
       <td><input type="text" /></td> 
       <td><input type="text" /></td> 
       <td><input type="text" /></td> 
       <td><input type="text" /></td> 
       <td>Result</td> 
      </tr> 

     </table> 
     <input type="button" name="rank" value="Rank" onClick="rankPlayers(this.form)"/> 
    </form> 

Vorrei iterare tutti i campi e ottenere i valori con la semplice pressione del pulsante, ma ottengo indefinita tornato nel log della console. Non voglio usare ID per ogni campo perché voglio fare alcune operazioni con le colonne (aggiungi, moltiplica). Il mio script per la prima colonna si presenta così:

  function rankPlayers(){ 
      var table=document.getElementById("table"); 
      for(var i=1; i<table.rows.length;i++){ 

        console.log(table.rows[i].cells[0].value); 
      } 
     } 

Qualche consiglio? Grazie

Answer 1

È necessario selezionare l'ingresso dalla cella:

// ------------------------------------v 
console.log(table.rows[i].cells[0].firstChild.value); 

---

Se si potrebbe avere fratelli (anche gli spazi bianchi) intorno agli ingressi, è possibile utilizzare la collezione .children di indirizzare il elemento corretto.

// ------------------------------------v 
console.log(table.rows[i].cells[0].children[0].value); 

---

Answer 2

È possibile modificare il ciclo a:

var table=document.getElementsByTagName("td"); 
    for(var i=1; i<table.length;i++){ 
     console.log(table[i].firstChild.value); 
    } 

Questo ottiene tutti td gli elementi, li loop, e controlla il valore firstChild