使用jQuery向表添加動態href

Question

我有一個帶有模板的表，用於插入行，我想使這些行可單擊，以便我可以對其進行編輯。 如何將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;
   }

Answer 1

您可以使用.data()

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

同

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

然后您可以像-

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

如果您只是希望以某種方式存儲數據，那么這可能會很有用。 讓我知道您是否還有其他想做的事情。 或保留什么樣的數據href ，以及您想如何進一步使用它。

---

UPDATE

據我所知，您想要動態添加在插入后需要編輯的行。 每行包含一些具有某些值的字段。 並且您想將ref保存在item_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);

擺弄示范

我認為這就是您想要做的並且應該達到目的。 :)

Answer 2

實際上，有幾種方法可以做到這一點，其中一種是：

1. 向您的模板添加一些隱藏的輸入
2. 將click事件綁定到將隱藏跨度並顯示輸入的行

您當然需要一個保存按鈕並使用這些值來做一些事情，但是我沒有做那部分。

濃縮的無法完全正常運行的演示： http : //plnkr.co/edit/GGM0d9wfNcoZBd5kKCwA

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

jQuery的：

$(document).on('click', '#quote tr', function(e) {
   $('span', this).hide();
   $('input', this).show();
 });

 $('#add').on('click', function(e) {
    var newRow = $('#quote .template').clone().removeClass('template');
    var quoteItem = {
        number: 1,
        description: 'myDescriptionVariable',
        price: 100,         
    };


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



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

       return row;
   }