我有一个带有模板的表,用于插入行,我想使这些行可单击,以便我可以对其进行编辑。 如何将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;
   }

#1楼 票数: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);

摆弄示范

我认为这就是您想要做的并且应该达到目的。 :)

#2楼 票数:0

实际上,有几种方法可以做到这一点,其中一种是:

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

  ask by Four_lo translate from so

未解决问题?本站智能推荐:

2回复

将动态jQuery a href添加到动态jQuery div中

我已经动态创建了一个<a>标签和一个动态<div>标签。 我希望<a>是<div>的子级,最后将div添加到其父级中。 以下是代码: 最后,我使用以下命令将div_item添加到给定的父div: $('#myParentDiv').
1回复

jQuery使用动态ID将行添加到表中

http://jsfiddle.net/waH5S/6/ 我试图在添加的行之前获取表行的ID( <tr> ),然后使用适当的parseint(...)将其添加1。 接下来,对单元格( <td> )进行同样的操作,以便每个单元格都具有每个表的唯一ID。 我似乎找
2回复

如何在jQuery中向动态创建的表中添加动态单选按钮

我想将单选按钮添加到动态创建的表中。 这是我添加动态创建对象的HTML代码。 这是网站的Jquery代码 已创建输入,但未显示单选按钮。 任何人都可以提供一种添加具有动态值的单选按钮的方法吗? 这是我得到此输出的图像
2回复

使用jQuery将动态href和目标附加到锚点

我正在使用一块jQuery,它使我拥有一个“图像框”库,如果有人单击拇指,则相应的图像将被加载到“图像框” div中。 我对代码进行了一些修改,以便在单击拇指时,它也将与图像的src一起加载到锚点中,以便用户可以在新选项卡中打开图像。 我的问题是,每当我将target =“ _ bl
2回复

使用动态值将 href 标签附加到 jQuery 中的 div

当使用上面的代码创建带有动态值的超链接时,超链接不是用单引号中的动态值创建的。 它给了我以下结果。 我需要在上面的代码中更改什么?
2回复

使用JS和JQUERY创建动态链接

我需要协助! 我有这样的HTML代码: 这是我的JS代码: 我想用JQUERY读出JS代码并将其插入到所有[a href =“”]中,以创建一个动态链接。 非常感谢你!
4回复

jQuery-如何附加动态href和使用onclick?

我结合了在论坛上阅读的内容,得出了到目前为止的内容: // performUsernameAjax函数的一部分 HTML: “ for”循环应该创建带有用户名的超链接列表,我希望每当单击链接时,“ click”侦听器都将“捕获”它,并在其中执行我的操作。我尝试了几件事:当
2回复

如何使用 JQuery 将动态图像添加到表中的特定单元格?

下面是我用来将用户在模态中输入的特定输入值添加到使用 JQuery 的表的代码,但是我正在努力将图像输入到表中,用户将使用文件选择他们想要的图像使用#insert-image的 ID 的表单输入。 这是我到目前为止不起作用的代码: 所以基本上有问题的线路是这样的: 任何帮助将非常感激。