使用jquery ajax xml更新td单元格输入字段

时间:2013-05-21 00:13:23

标签: jquery xml ajax

我有一个动态表生成的服务器端,其中的单元格包含一些HTML标记,输入字段以及纯文本。我还有一个滑块小部件,允许用户在单元格中添加百分比。滑块进行ajax调用,返回一个有效的XML文件,该文件包含表中每个单元格(td)的一个节点。这一切都很好。

问题是我不确定如何同时遍历XML和单元格。我正处于检索XML数据工作正常的地步。

$('#point_value').live("change", function(){
    var this_sct=$(".program_grid");

    $.ajax({
        type:'POST',
        url:"ajax/points_update.php",
        data:{
            pr_id:$("#programid").val(),
            point:$("#point_value").val(),
            calc_lease_amount:$("#calc_lease_amount").val(),
            calc_lease_amount_extra_dollar:$("#calc_lease_amount_extra_dollar").val()
        },
        context:document.body,
        dataType:"xml",
        success:function(xml){
            $(xml).find('payment').each(function(){
            ... this is where the code needs to loop through each <td>
            ... and update the existing values with the new XML values

            >> doesn't work >> $(this_sct).next('input[name^="elb"]').val($(this).find("payment_h").text());                

            ... replace dynamically named input 'elb##' value with new number
            ... each <td> will have an input  field needing to be updated
            ...   <td><input name='elb1' value='123.45'></td>
            ...   <td><input name='elb2' value='419.11'></td>

        }
    });
});

我尝试通过<input>更新find以'elb'开头的输入并将其.val()更改为XML中的“payment_h”text()字段。

XML示例文件

<?xml version="1.0" encoding="iso-8859-1"?>
<program>
<payment>
    <payment_h>3018.48</payment_h>
    <payment_l>2018.48</payment_l>
    <bo_1>100.62</bo_1>
    <bo_2>17.45</bo_2>
</payment>
<payment>
    <payment_h>2269.74</payment_h>
    <payment_l>1269.74</payment_l>
    <bo_1>75.66</bo_1>
    <bo_2>13.12</bo_2>
</payment>
<payment>
    <payment_h>1897.20</payment_h>
    <payment_l>897.20</payment_l>
    <bo_1>63.24</bo_1>
    <bo_2>10.97</bo_2>
</payment>
</program>

HTML示例文件

<table>
<tr>
    <th></th>
    <th>header 1</th>
    <th>header 2</th>
    <th>header 3</th>
</tr>
<tr>
    <th>row 1</th>
    <td><input type="hidden" name='elb7' value='123.45'>123.45</td>
    <td><input type="hidden" name='elb8' value='823.15'>823.15</td>
    <td><input type="hidden" name='elb9' value='1123.95'>1123.95</td>
</tr>   
<tr>
    <th>row 2</th>
    <td><input type="hidden" name='elb10' value='2123.45'>2123.45</td>
    <td><input type="hidden" name='elb11' value='3123.45'>3123.45</td>
    <td><input type="hidden" name='elb12' value='4123.45'>4123.45</td>
</tr>   
</table>

我很接近,但需要一些指导。

提前致谢。

2 个答案:

答案 0 :(得分:0)

似乎你很近(我几乎不敢相信这很容易)。 更改您的成功功能如下:

   success:function(xml){
                var pos =0;
                $(xml).find('payment').each(function(){
                    var e = $(this_sct).find('input[name^="elb"]')[pos];
                    $(e).val($(this).find("payment_h").text());
                    pos++;
                })

有一些改进可能,但这应该显示方式。这假定“this_sct”是应该更改的td的父tr元素。

答案 1 :(得分:0)

也许有点短:

success : function(xml){
    $(xml).find('payment').find("payment_h").each(function(ind){
         $('input[name^="elb"]').eq(ind).val($(this).text());
    });
}