Как получить данные из таблицы html с несколькими входами

Question

У меня есть страница, содержащая эту таблицу, которая исходит из скрипта PHP.

Что я хочу сделать? Я хочу получить каждое значение внутри этих 4 входов отдельно и сохранить их внутри 4 переменных javascript. У меня уже есть «OnClick =» fetchGrades();.?.»На каждой кнопке

Как я могу добиться этого Это последняя вещь мне нужно сделать по этому проекту

Кроме того, я используя все эти Tecnologies:. PHP, MySQL, JQuery, Bootstrap, 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> 

я присваивается идентификационный nside каждый вход поступает из поля в 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(); 
}