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

Question

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

我根据 header 的数量创建了 table header 和文本框，您可以在下面的代码中看到。这是在一个函数中，其他部分只是 table 和查询的代码。

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

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

注意：我正在使用 ajax 的 post 将值传回我的 PHP 文件。 table 是使用动态值创建的，因此它将在同一个 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

使用下面的代码，您可以获得 headers 和值的 JSON object。检查一下：

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 object 发送至 php

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

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

Getting text box value that is in the td, store in array in Javascript and passing back to PHP

javascript

php

ajax

jquery

html-table