Javascript jquery将操作应用于指定的元素

无论如何，我想做的是：

我有以下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>

但最重要的是，当我更改

cat_name value

，

unit

，

vat

，

的
价格
时，应使用ajax/jquery设置目录：

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

但这些更改仅影响第一行

例如：
数据库中的信息

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

（1）设置
cat\u name=cat1

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


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

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

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

*（2）添加新行并在第二行设置
cat\u name=cat2
后
只有第1行受影响*

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

我想要的正是这个

使用ID当然是最容易编写的选择器，但是当处理一个模块的多个实例时，它通常比使用遍历查找元素的公共类名更复杂

对于初学者，将演示如何使用
closest（）
和
find（）
隔离行实例

/* 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);
             }
        })
    }
});

演示：

这将帮助您解决UI问题。至于DB问题，在代码中的某个地方，您可能需要一些与您的DB设置相匹配的行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);
             }
        })
    }
});