获取 td 中的文本框值，在 Javascript 中存储在数组中并传回 PHP

Question

我有一个使用 PHP 显示的表格。只有两行，第一行包含标题，第二行包含 td 内的文本框。我在脚本的这一部分中尝试做的是让用户输入一些值，然后我想根据标题名称获取值，以便我可以将它们用于查询。

我已经根据标题的数量创建了表格标题和文本框，如下面的代码所示。这是在一个函数内部，其他部分只是表和查询的代码。

现在我的主要问题是我想根据标题获取每个文本框的值。例如，如果标题名为Configuration，并且该标题下的文本框中的值是用户输入的1,5,8。单击按钮后，将执行一个新的 PHP 函数。这个函数是我正在处理的获取文本框值的函数。我已经尝试在 Javascript 中遍历表格单元格，但我一直在获取文本框值。

如果可能，我想知道如何将所有标题存储在 Javascript 中的数组中，以及相应地存储文本框值。如果它是在 PHP 中，它将类似于 $user_input[$header][$text_val]。或者，只要我能够获取与标题对应的值以便我可以在查询中使用它，那么单独的数组就可以了。

注意：我正在使用 ajax 的帖子将值传回我的 PHP 文件。该表是使用动态值创建的，因此它将获取同一 PHP 文件中的值并将其传递回该文件（称为 database.php）。我看到了一些与json_encode有关的代码，但是我从来没有使用过与json有关的任何东西，所以如果有使用json的解决方案，请提前原谅我并帮助我简单地解释一下.

while($row = mysql_fetch_assoc($result))
{
    $board_name = $row['board_name'];
    $header[] = $board_name;
}

foreach($header as $index => $head)
{
    $html .= "<th>$head</th>";
}

$html .= "
    </tr>
    <tr id=\"config_input\">
        <td colspan = \"3\">
            Please Key in Configuration:
        </td>";

foreach($header as $index => $head)
{
    $html .= "
    <td>
        <input type=\"text\" style=\"width: 70px\"/>
    </td>";
}

$html .= "</tr>";

编辑，这是我迄今为止在我的外部 JavaScript 文件中尝试过的：

// After use has typed in input and clicked button, this function is executed
function searchConfig()
{
    var tester_type = $("#tester_type").val();
    var table = document.getElementById("searchByConfigTable");
    var headers = document.getElementById("headers");
    var text_row = document.getElementById("config_input");
    var page = "database.php";

    var board_name = new Array();
    var board_config = new Array();

    for (var i = 3, col; col = headers.cells[i]; i++) // headers
    {
        var str = col.innerHTML;
        board_name.push(str);
    }

    for (var i = 3, col; col = text_row.cells.value[i]; i++) // text_row
    {
        var str = col.innerHTML;
        board_config.push(str);
        // array has no value because it's not text box value 
        // that is stored, not sure what to do
    }

    // Not sure what to do from here on

    $.post(page, {
        tester_type : tester_type,
        action : "search_config"
        }, function(data) {
        $("div#display_board").html(data);
    });
}

Answer 1

使用下面的代码，您可以获得标头和值的 JSON 对象。看看吧：

HTML：

<table id="myTable">
<thead>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>comment</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><input value="1" type="text"></td>
        <td><input value="name1" type="text"></td>
        <td><input value="coment1" type="text"></td>
    </tr>
</tbody>

Javascript：

var header = [];
var values = [];
var json = [];

$('#myTable').find('th').each(function() {
    header.push($(this).html());
});


$('#myTable').find('tbody > tr > td').each(function() {
    values.push($(this).find('input').val());
  str.push($(this).html());
});

for (var i in header) {
  json[i] = {};
  json[i][header[i]] = values[i];
}

console.log(json);

您可以使用 AJAX 将此 json 对象发送到 php

$.ajax({
    type: "POST",
    url: "file.php",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    data: json
}).done(function(JqXHR){
    alert(JqXHR);
});