例如：

Question

无论如何我想做的是：

我有以下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，vat，{{1>} 该目录应使用ajax /设置时jquery的：

这是jquery代码

price

但更改仅影响第一行

例如：

数据库中的信息

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 = ""
        }
    });
});

我在浏览器中看到的内容：

（1）设置cat1[unit] = "dollar" cat1[vat] = "7%" cat1[price] = "80" cat2[unit] = "euro" cat2[vat] = "19%" cat2[price] = "50"

cat_name = cat1

*（2）添加新行并在第二行设置[ cat1 [v]] euro 7% 80 [add]后只有第1行受影响*

cat_name = cat2

我想要的就是

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

Answer 1

使用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);
             }
        })
    }
});

DEMO：http://jsfiddle.net/r8vKb/2/

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

jquery将action应用于指定的元素

例如：

1 个答案: