jQuery通过表循环并获取元素 [英] jQuery loop through table and get element

问题描述

 < table>< p> 
< thead> 
 .... 
< / thead> 
< tr> 
< td>< input type =textname =n_timeid =5030c9261eca0value =2012/>< / td> 
< td>< input type =textname =n_nameid =5030c9261eca0value =a name/>< / td> 
< td>< textarea name =n_commentid =5030c9261eca0> bla< / textarea>< / td> 
< / tr> 
< / table> 
  

现在，我需要使用 $。post 到我的PHP处理页面
看起来像



  if（$ _ POST ['data' ]）{
 $ array = json_decode（$ _ POST ['data']）; 
 
 
 
 
 $ b $ p 
 $ b 
所以我需要得到我所有的表单元素，然后转换成JSON 
 
 
 
这就是我所做的： 
 
 
  / /假设我可以从我的预定义变量中获得5030c9261eca0 ... 
 $ my_array = $（＃5030c9261eca0）。map（function（）{return $（this）.is（input）？$（this ）.val（）：$（this）.text（）;}）; 
 //现在转换
 JSON.stringify（$ my_array）; 
 //转换失败：Uncaught TypeError：将循环结构转换为JSON 
  
此错误
 $ b 
 未捕获的TypeError：将循环结构转换为JSON 
  
 
 
如何解决这个问题？
另外，如果我通过HTML表单调用HTTP post，我可以接收在PHP中如果我有一个HTML表单元素，如 $ _ POST ['n_name'] >，首先循环所有 tr 是否可以完成与上述相同的操作？   c>，然后循环遍历所有 input，textarea 并将聚集的值推送到数组。 c $ c> var data = []; 
 $（'table tr'）。each（function（）{
 var row = {}; 
 $（this）.find（'input，textarea'）。each（function ）{
 row [$（this）.attr（'name'）] = $（this）.val（）; 
}）; 
 data.push（row）; 
}）; 
 
 //现在你可以使用data:) 
  

code> 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函数：

$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $表$数据=函数（）{
var data = [];
$（this）.find（'tr'）。each（function（）{
var row = {};
$（this）。 find（'input，textarea'）。each（function（）{
row [$（this）.attr（'name'）] = $（this）.val（）;
}）;
}）;
返回数据;
}
}）（jQuery）;
$ b $ //用法：

$ .post（test.php，{'mydata'：$（'table'）。tableData（）}）;

i've got some form input elements in an html table like this:

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

now, i need to send this form data using $.post to my PHP processing page which looks something like

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

}

so i need to get all my form elements and somehow made then into JSON

and this is what i did:

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

this error poped up:

Uncaught TypeError: Converting circular structure to JSON 

how do i fix this?

also, if i do regluar HTTP post via HTML forms, i can recieve form data like $_POST['n_name'] in PHP if i have a HTML form element with attribute n_name, how can i accomplish the same with the above?

解决方案

First loop through all tr, then loop trought all input,textarea and push gathered values to array.

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" :)

Example 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'];
}

---

It's good idea to convert it to jQuery function:

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

这篇关于jQuery通过表循环并获取元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！