1

行を挿入するためのテンプレートを含むテーブルがあり、それらの行をクリックして編集できるようにしたいと考えています。テンプレートに href 値を追加するにはどうすればよいですか?

マイ テンプレート

        <tr class="template" style="display:none;">
            <td><span class="item_num"> Num </span></td>
            <td><span class="item_desc"> Description </span></td>
            <td><span class="item_price"> Price </span></td>
            <td><span class="item_ref">ref</span></td>
        </tr>

私のJavascript

    var newRow = $('#quote .template').clone().removeClass('template');
    var quoteItem = {
        number: 1,
        description: myDescriptionVariable,
        price: myPriceVariable,         
    };


    template(newRow, quoteItem)
        .insertAfter('#quote tr.template')
        .fadeIn()


   function template(row, quoteItem) {
       row.find('.item_num').text(quoteItem.number);
       row.find('.item_desc').text(quoteItem.description);
       row.find('.item_price').text(quoteItem.price);
       row.find('.item_ref').attr('href','hello');
       return row;
   }
4

2 に答える 2

1

使用できます.data()

 row.find('.item_ref').data('ref','hello');

と

 <span class="item_ref" data-ref="" > Edit</span>

次に、次のように使用できます-

     console.log($('.item-ref').data('ref'));

どうにかしてデータを保存したいだけなら、これは役に立つかもしれません。もっとやりたいことがあれば教えてください。または、どのようなデータhrefが保持され、それをさらにどのように使用したいか。

アップデート

私が今まで理解していることから、挿入後に編集可能にする必要がある行を動的に追加したいということです。各行には、特定の値を持ついくつかのフィールドが含まれています。item_refそして、refをクラスに保存したいとします。

だからここにあなたがそれを行うことができる方法があります -

var num = 1; 
var myDescriptionVariable = 111;
var myPriceVariable = 999;

 // You may have some other element triggers cloning
$("button").click(function(){
    var newRow = $('#quote .template').clone().removeClass('template'); 

    var quoteItem = {
        number: num,
        description: 'Description ' + myDescriptionVariable, // added to distinguish items
        price: myPriceVariable + '  USD', // added to distinguish items
        linkToPopup: myDescriptionVariable + '_link_goes_here' // added to distinguish items
    };

    template(newRow, quoteItem)
            .insertAfter('#quote tr.template')
            .show();
});

function template(row, quoteItem) {
    row.find('.item_num').text(quoteItem.number);
    row.find('.item_desc').text(quoteItem.description);
    row.find('.item_price').text(quoteItem.price);
    // here 'href' will hold desired link_to_popup
    row.find('.item_ref').data('href',quoteItem.linkToPopup); 
    myDescriptionVariable+= 1; // added to distinguish items
    myPriceVariable+=2; // added to distinguish items
    num+=1; // added to distinguish items
    return row;
}

$("#quote").on("click", ".item_ref",function(){    
     // this will give to desired link_to_pop_val
    alert($(this).data('href')); 
});

buttonデモンストレーションを行うために を追加しました。このアプローチにより、非表示の入力などの不要な DOM 要素が各行に追加されることは確実に回避されます。.data()次のようなすべてのフィールドについて、同じ複数の種類の情報を使用します-

 $("span").data('key_1', value_1);
 $("span").data('key_2', value_2);
 $("span").data('key_2', value_3);

デモンストレーション用フィドル

それがあなたがやりたいことであり、目的を果たすべきだと思います。:)

于 2013-05-11T15:37:27.187 に答える