jQuery循环遍历表格并获取元素答案

【问题标题】：jQuery loop through table and get elementjQuery循环遍历表格并获取元素
【发布时间】：2012-08-20 15:19:07
【问题描述】：

我在 html 表格中有一些表单输入元素，如下所示：

<table>
    <thead>
    ....
    </thead>
    <tr>
        <td><input type="text" name="n_time" id="5030c9261eca0" value="2012" /></td>
        <td><input type="text" name="n_name" id="5030c9261eca0" value="a name" /></td>
        <td><textarea name="n_comment" id="5030c9261eca0">bla</textarea></td>
    </tr>
</table>

现在，我需要使用$.post 将此表单数据发送到我的 PHP 处理页面看起来像

if($_POST['data']){
    $array = json_decode($_POST['data']);

}

所以我需要获取我所有的表单元素，然后以某种方式制作成 JSON

这就是我所做的：

// assume i can get 5030c9261eca0 from my predefined vars...
$my_array = $("#5030c9261eca0").map(function () { return $(this).is("input")?$(this).val():$(this).text(); } );
//now convert
JSON.stringify($my_array);
// the conversion failed with : Uncaught TypeError: Converting circular structure to JSON

弹出这个错误：

Uncaught TypeError: Converting circular structure to JSON

我该如何解决这个问题？

另外，如果我通过 HTML 表单进行常规 HTTP 发布，如果我有一个带有属性 n_name 的 HTML 表单元素，我可以在 PHP 中接收像 $_POST['n_name'] 这样的表单数据，我怎样才能完成与上述相同的操作？

【问题讨论】：

你不应该在一个页面上多次使用同一个 ID。改用类
如果你打算使用ajax发布表单，你可以试试$('#formId').serialize()
那么在将 POSTed 数据转换为 JSON 时，您获得了什么价值？在我看来，您最好使用$('#formid').serialize() 来准备好您的表单数据以进行发布。并且可以在 PHP 中少一步来获取您的 POST 数据。
在我的原始 HTML 表格中，我没有
标签，所以我只需要添加标签以使其与$('#formid').serialize() 一起使用？

标签： php jquery json forms

【解决方案1】：

首先循环遍历所有tr，然后循环遍历所有input,textarea，并将收集到的值推送到数组中。

var data = [];      
$('table tr').each(function(){
    var row = {};
    $(this).find('input,textarea').each(function(){
        row[$(this).attr('name')] = $(this).val();
    });
    data.push(row);
});

// now you can use "data" :)

例如data:

[0][n_time] = foo
[0][n_name] = bar
[0][n_comment] = 123
[1][n_time] = foo
[1][n_name] = bar
[1][n_comment] = 123
...

jQuery:

$.post("test.php", { 'mydata': data } );

PHP：

foreach($_POST['mydata'] as $row) {
    echo $row['n_name'];
}

最好将其转换为 jQuery 函数：

(function( $ ) {
  $.fn.tableData = function() {
    var data = [];      
    $(this).find('tr').each(function(){
        var row = {};
        $(this).find('input,textarea').each(function(){
            row[$(this).attr('name')] = $(this).val();
        });
    });
    return data;
  }
})( jQuery );

// Usage:

$.post("test.php", { 'mydata': $('table').tableData() } );

【讨论】：

经过一些测试，数据总是显示为空（data.length = 0），有什么想法吗？
我的错。只需删除if(row.length)

【解决方案2】：

您有两个具有完全相同 ID 的不同变量，5030c9261eca0。对于给定的 HTML 页面，ID 应该是唯一的。

给每个元素一个唯一的 ID。

相反，为每个要定位的元素提供一个共享类，例如needToPost，并使用该类：

$my_array = $(".needToPost").map(function () { return $(this).is("input")?$(this).val():$(this).text(); } );

【讨论】：