Pobierz wartości z tabeli pól tekstowych javascript

Question

Mam formularz, który faktycznie jest tabelą pól tekstowych. Html wygląda następująco:

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

Chciałbym iteracyjne wszystkich pól i uzyskać wartości po naciśnięciu przycisku, ale dostać niezdefiniowane zwrócony w dzienniku konsoli. Nie chcę używać identyfikatorów dla każdego pola, ponieważ chcę wykonywać niektóre operacje kolumnowe (dodawać, mnożyć). Mój skrypt dla pierwszej kolumny wygląda następująco:

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

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

Jakieś wskazówki? Dzięki

Answer 1

Musisz wybrać wejście z komórki:

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

---

Jeśli można mieć rodzeństwo (nawet spacje) wokół wejść, a następnie można użyć kolekcji .children do kierowania poprawny element.

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

---

Answer 2

można zmienić pętli:

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

ten pobiera wszystkie td elementów, pętle je i sprawdza wartość firstChild