如何從具有多個輸入的html表中獲取數據

Question

我有一個包含來自PHP腳本的此表的頁面。

我想要做什麼？我想要分別獲取這4個輸入內的每個值，並將它們保存在4個JavaScript變量中。我已經有「的onclick =」 fetchGrades（）;？」在每一個按鈕

我怎樣才能做到這一點這是最後的事情，我需要在這個項目上做

另外，我使用所有這些TECNOLOGIES：PHP，MySQL和jQuery的，引導，AJAX

按照要求，當前表的HTML

<table class="table table-striped"> 
    <thead> 
     <tr> 
     <th>61</th> 
     <th>1º </th> 
     <th>2º </th> 
     <th>3º </th> 
     <th>4º </th> 
     <th> Botão </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Patrick Maia</td> 
      <td><input id="e12467" type="text"> </td> 
      <td><input id="e12467" type="text"> </td> 
      <td><input id="e12467" type="text"> </td> 
      <td><input id="e12467" type="text"> </td> 
      <td><button class="btn btn-primary" onclick="fetchGrades();"> Adicionar </button></td> 
     </tr> 

     <tr> 
      <td>Rodrigo Marques</td> 
      <td><input id="46c9ac" type="text"> </td> 
      <td><input id="46c9ac" type="text"> </td> 
      <td><input id="46c9ac" type="text"> </td> 
      <td><input id="46c9ac" type="text"> </td> 
      <td><button class="btn btn-primary" onclick="fetchGrades();"> Adicionar </button></td> 
     </tr> 
    </tbody> 
</table> 

該ID的我如果每個輸入都來自它們來自的MySQL的某個字段，

Answer 1

如果在你的HTML表格輸入是舉辦這樣的事情：

<table> 
    <tr> 
     <th> 
      61 
     </th> 
     <th> 
      1 
     </th> 
     <th> 
      2 
     </th> 
     <th> 
      3 
     </th> 
     <th> 
      4 
     </th> 
     <th> 
      Boton 
     </th> 
    </tr> 
    <tr> 
     <td> 
      Patrick Maia 
     </td> 
     <td> 
      <input class="tblData_Row_1" type="text" /> 
     </td> 
     <td> 
      <input class="tblData_Row_1" type="text" /> 
     </td> 
     <td> 
      <input class="tblData_Row_1" type="text" /> 
     </td> 
     <td> 
      <input class="tblData_Row_1" type="text" /> 
     </td> 
     <td> 
      <input id="Button1" type="button" value="Accionar" onclick="fetchGrades('tblData_Row_1');" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Rodrigo Marquez 
     </td> 
     <td> 
      <input class="tblData_Row_2" type="text" /> 
     </td> 
     <td> 
      <input class="tblData_Row_2" type="text" /> 
     </td> 
     <td> 
      <input class="tblData_Row_2" type="text" /> 
     </td> 
     <td> 
      <input class="tblData_Row_2" type="text" /> 
     </td> 
     <td> 
      <input id="Button2" type="button" value="Accionar" onclick="fetchGrades('tblData_Row_2');" /> 
     </td> 
    </tr> 
</table> 

你可以很容易地使用jQuery來處理其餘部分：

function fetchGrades(rowClass) { 
    var JSONresults = {}; 

    var indexColumn = 0; 

    $('.' + rowClass).each(function() { 
     indexColumn++; 
     JSONresults['field_' + indexColumn] = $(this).val(); 
    }); 

    alert(JSON.stringify(JSONresults)); //show me my JSON object in string format 
} 

Answer 2

嘗試這樣的事情...

function fetchGrades() { 
    var first = document.getElementById('FirstField_row1').value; 
    var second = document.getElementById('SecondField_row1').value; 
    var third = document.getElementById('ThirdField_row1').value; 
    var fourth = document.getElementById('FourthField_row1').value; 
} 

使用jQuery：

function fetchGrades() { 
    var first = $('#FirstField_row1').val(); 
    var second = $('#SecondField_row1').val(); 
    var third = $('#ThirdField_row1').val(); 
    var fourth = $('#FourthField_row1').val(); 
} 

承擔，：

<td><input id='FirstField_row1'/></td> 
<td><input id='SecondField_row1'/></td> 
<td><input id='ThirdField_row1'/></td> 
<td><input id='FourthField_row1'/></td> 

Answer 3

正如評論所說，是toug h無需代碼即可工作。 :-)

也就是說，一般的答案是你想用某種方式標記每行，這樣你的onClick腳本就知道按鈕所指的是哪一行。

一個簡單的例子：當onClick觸發時，每個按鈕傳遞一個行號參數。

我希望有幫助！

Answer 4

此發現按下的按鈕，導航到父tr，然後找到第一，第二等input元素，並將它們保存到變量：

function fetchGrades(event) { 
    var sender = (event && event.target) || (window.event && window.event.srcElement); 
    var first = $(sender).closest('tr').find('input:eq(0)').val();  
    var second = $(sender).closest('tr').find('input:eq(1)').val(); 
    var third = $(sender).closest('tr').find('input:eq(2)').val(); 
    var fourth = $(sender).closest('tr').find('input:eq(3)').val(); 
}