Add dynamic href to table with jquery

Question

I have a table with a template to insert rows, I would like to make those rows clickable so that I can edit them. How do I append an href value to the template?

My Template

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

My 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

You can use .data()

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

with

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

Then you can use it like --

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

If you just wish to store data somehow then this might be useful. Let me know if there's something more you want to do. Or what kind of data href holds and how you want to use it further.

---

UPDATE

From what I understand up till now is, you want to add rows dynamically that needs to editable after insertion. Each row contain some fields with certain values. And you want to save ref in item_ref class.

So here's how you can do it -

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

I've added a button to give demonstration. This approach definitely avoid unnecessary DOM elements like hidden inputs to be added for each row. With .data() you same multiple kind of information for every field like -

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

fiddle for demonstration

I think that's what you want to do and should serve the purpose. :)

Answer 2

There are actually a few ways to do this, one of them being:

1. Add some inputs to your template that are hidden
2. Bind a click event to the row that will hide the spans and show the input

You would of course need a save button and do something with the values, but I didn't do that part.

A condensed not fully working demo: 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;
   }