javascript - 使用foreach循环遍历表创建数组

时间:2014-04-20 14:30:14

标签: javascript jquery arrays foreach

我的表格有这样的表格:

<table id="preview">
<tbody>
<tr>
<td>01/01/2010</td>
<td>Credit</td>
<td>1000</td>
</tr>
<tr>
<td>01/05/2010</td>
<td>Debit</td>
<td>200</td>
</tr>
<tr>
<td>01/09/2010</td>
<td>Debit</td>
<td>400</td>
</tr>
<tr>
<td>01/11/2010</td>
<td>Debit</td>
<td>100</td>
</tr>
</tbody>
</table>

现在我需要创建一个像这样发送(ajax / php)的数组:

$ajaxArray = array(   0 => array(From   => "01/01/2010",  //1st td of the 1st Row
                                    To     => "01/05/2010",  //1st td of the 2nd Row
                                    Type   => "Credit",
                                    Amount => 1000.00),
                         1 => array(From   => "01/05/2010",  //1st td of the 2nd Row
                                    To     => "01/09/2010",  //1st td of the 3th Row
                                    Type   => "Debit",
                                    Amount => 200.00),
                         2 => array(From   => "01/09/2010",  //1st td of the 3th Row
                                    To     => "01/11/2010",  //1st td of the 4th Row
                                    Type   => "Debit",
                                    Amount => 400.00),
                         3 => array(From   => "01/11/2010",  //1st td of the 4th Row
                                    To     => "01/01/2012",  //Value in $last_date var
                                    Type   => "Debit",
                                    Amount => 100.00)
        );

我尝试使用此代码:

 $('#preview > tbody  > tr').each(function() {
            var from = $('td:eq(0) ', this).text();
            var type = $('td:eq(1) ', this).text();
            var amount = $('td:eq(2) ', this).text();
            ajaxArray.push({
                From: from,
                Type: type,
                Amount: amount
            });
        });

正如你所看到的,我无法获得&#34; To&#34;日期值。 &#34; To&#34; date值是Next行的第1个TD中包含的日期,最后一行除外,其中该值位于$ last_date变量中。

提前致谢

1 个答案:

答案 0 :(得分:2)

这应该Fiddle Demo

var array = [];
var rows  = $("#preview tbody tr");

$.each( rows, function(index, row) {   
    var columns = $(row).find("td");
    
    array[index] = {};             
    array[index].from = columns[0].innerHTML;    
    array[index].type = columns[1].innerHTML;
    array[index].amount = columns[2].innerHTML;
    
    if(index > 0){
        array[index - 1].to = columns[0].innerHTML;
    }      
});
    
$("#result").text(JSON.stringify(array));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="preview">
<tbody>
<tr>
<td>01/01/2010</td>
<td>Credit</td>
<td>1000</td>
</tr>
<tr>
<td>01/05/2010</td>
<td>Debit</td>
<td>200</td>
</tr>
<tr>
<td>01/09/2010</td>
<td>Debit</td>
<td>400</td>
</tr>
<tr>
<td>01/11/2010</td>
<td>Debit</td>
<td>100</td>
</tr>
</tbody>
</table>

<hr/>
    
<pre id="result"></pre>