Добавить динамический href в таблицу с jquery

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

fiddle for demonstration

Я думаю, что это то, что вы хотите сделать, и должны служить этой цели. :)

Answer 2

Есть на самом деле несколько способов сделать это, один из них:

1. Добавить некоторые входные данные шаблона, которые скрыты
2. Bind щелчка событие к строке, которая будет скрывать просеивать и показывать входные данные

Вам, конечно же, потребуется кнопка сохранения и выполнить что-то со значениями, но я не сделал эту часть.

конденсированных не полностью рабочий демонстрационный пример: 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; 
    }