0

无论如何，我想做的是：

我有以下html：

<table>
    <tr id="cats">
        <td><select class="cats" id="cat_name"><option value="1">cat1</option>
                                  <option value="2">cat2</option>
            </select></td>
        <td><div id="unit"></div></td>
        <td><div id="vat"></div></td>
        <td><div id="price"></div></td>
        <td><input class="add-btn" id="Add" type="button" value="Add" /></td>
    </tr>
</table>

当我单击add它时，它会克隆#cats并将其附加到表中（*所有对象（tr、select、div）保持相同的 id！*）

我使用这段代码来做这工作正常

$('table').delegate(".add-btn", "click", function() {
      if(i2l < max) {
        $(this).parent().parent().after($(this).parent().parent().clone());
            // some other statments
            // don't care
      }
});

但最重要的是，当我更改该目录时，cat_name value应该unit使用ajax/jquery 设置：vatprice

这是jQuery代码

var prev_cat_id = ""
$('table').delegate(".cats", "change", function() {
        var cat_id = $(this).val()
        if(jQuery(this).val()){
            $.ajax({
                url: "../ajax/catalogue.json?catalogues="+jQuery(this).val(),
                datatype: "json",
                success: function(data){
                            $('#unit'+prev_cat_id).attr('id','unit' + cat_id);
                            $('#price'+prev_cat_id).attr('id','price' + cat_id);
                            $('#vat'+prev_cat_id).attr('id','vat' + cat_id);
                            $('#unit' + cat_id).text(data['unit']);
                            $('#vat' + cat_id).text(data['vat']);
                            $('#price' + cat_id).text(data['price']);
                            prev_cat_id = cat_id;
                            }
            });
        } else {
                    $('#unit'+prev_cat_id).attr('id','unit');
                    $('#price'+prev_cat_id).attr('id','price');
                    $('#vat'+prev_cat_id).attr('id','vat');
                    $('#unit').text('');
                    $('#vat').text('');
                    $('#price').text('');
                    prev_cat_id = ""
        }
    });
});

但更改仅影响第一行

例如 ：

数据库中的信息

cat1[unit] = "dollar"
cat1[vat] = "7%"
cat1[price] = "80"


cat2[unit] = "euro"
cat2[vat] = "19%"
cat2[price] = "50"

我在浏览器中看到的：

(1) 设置cat_name = cat1

[ cat1 [v]] euro 7% 80 [add]

* (2) 添加新行并cat_name = cat2在第二行设置后" 仅影响第 1 行 *

[ cat1 [v]] euro 19% 50 [add]
[ cat2 [v]]             [add]

我想要的正是这个

[ cat1 [v]] euro 7%  80 [add]
[ cat2 [v]] euro 19% 50 [add]
[      [v]]             [add]
4

1 回答 1

0

使用 ID 无疑是最容易编写的选择器，但是在处理模块的多个实例时，它通常比使用遍历查找元素的常见类名更复杂。

对于初学者，将演示如何使用closest()和find()隔离行实例。请注意，我将所有元素 ID 更改为类

/* store empty row for adding later*/
var $rowClone=$('#cats').clone().removeAttr('id');


/* if using jQuery >1.6 should use on() rather than delegate*/
$('table').delegate(".add-btn", "click", function() {    
          var $currentRow=  $(this).closest('tr');
        $currentRow.after($rowClone.clone());         

});

$('table').delegate(".cats", "change", function() {
    var val=$(this).val();  
    /* define current row to use in AJAX success*/  
    var $row= $(this).closest('tr');
    if( val){
        $.ajax({
            url:'/echo/json/',/* jsfiddle demo ajax url*/
            type:'post',
            data: {json:dummyData( val)},/* jsfiddle demo data generation*/
             datatype: "json",
             success: function(data){
                 /* only look within $row for elements to update*/
                 $row.find('.unit').text( data.unit);
                 $row.find('.vat').text( data.vat);
                 $row.find('.price').text( data.price);
             }
        })
    }
});

演示：http: //jsfiddle.net/r8vKb/2/

这将帮助您解决 UI 问题。至于数据库问题，在此代码中的某处，您可能需要一些与您的数据库设置相匹配的行 ID。需要更好地了解您的数据结构以帮助解决这个问题

于 2013-02-10T01:41:13.327 回答