Javascript 如何从具有多个输入的html表中获取数据

我有一个页面包含这个来自PHP脚本的表

我想做什么？我想分别获取这4个输入中的每个值，并将它们保存在4个Javascript变量中。我已经有了onclick=fetchGrades；在每个按钮上

我怎样才能做到这一点？这是我在这个项目上最不需要做的事情

此外，我正在使用所有这些技术：PHP、MySQL、jQuery、Bootstrap、AJAX

根据请求，当前表的HTML：

---

ID位于每个输入的内部，每个输入都来自MySQL上的一个字段。

试试这样的方法

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：

假设：

---

正如评论所说，没有代码很难工作：

也就是说，一般的答案是您希望以某种方式标记每一行，以便onClick脚本知道按钮所指的是哪一行

一个简单的例子：每个按钮触发onClick时都会传递一个行号参数

---

我希望这有帮助

这将查找按下的按钮，导航到父tr，然后查找第一个、第二个等输入元素，并将它们保存到变量中：

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();
}

---

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

---

你能显示其中一行的html吗…没有代码我就无法工作，你能吗？我不这么认为；也许可以尝试使用jQuery或vanilla JS查找如何从输入中获取值，这应该可以很好地解决您的问题。。。只能有一个。如果我在每行的每个id上添加_1、_2、_3、_4会怎么样？这将使它们具有唯一性。但我拥有的行数因情况而异。我假设您正在循环浏览某些数据，此时，您可以使用一个简单的计数器来识别行，甚至可以将其包含在按钮函数调用中，这将允许函数是动态的。抱歉，我很想把它全部写出来，但我今天没有那么多时间。我明白你说的话，我会考虑如何打开代码，谢谢。我已经添加了代码！

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

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();
}

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

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
}