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

しかし、最も重要なのは、そのカタログの、、、を変更するときは、ajax /cat_name value jqueryを使用して設定する必要があるということです。unitvatprice

これが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し、2番目の行に設定した後"行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 の問題を解決するのに役立ちます。DB の問題に関しては、このコード内のどこかで、DB セットアップと一致する行 ID が必要になる可能性があります。それを支援するには、データ構造をもう少しよく理解する必要があります

于 2013-02-10T01:41:13.327 に答える