Javascript 使用jquery将动态href添加到表中
我有一个带有插入行的模板的表,我想让这些行可以单击,以便我可以编辑它们。如何将href值附加到模板 我的模板Javascript 使用jquery将动态href添加到表中,javascript,jquery,html,Javascript,Jquery,Html,我有一个带有插入行的模板的表,我想让这些行可以单击,以便我可以编辑它们。如何将href值附加到模板 我的模板 <tr class="template" style="display:none;"> <td><span class="item_num"> Num </span></td> <td><span class="item_desc"> Des
<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>
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;
}
你可以用
与
如果您只是希望以某种方式存储数据,那么这可能很有用。如果你还想做什么,请告诉我。或者存储什么类型的数据,以及您希望如何进一步使用它
更新
<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>
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;
}
据我所知,到目前为止,您希望动态添加插入后需要编辑的行。每行包含一些具有特定值的字段。您想将ref保存在item\u 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'));
});
我添加了一个按钮来演示。这种方法绝对避免了为每行添加不必要的DOM元素,如隐藏输入。使用.data()
可以为每个字段提供相同的多种信息,如-
$("span").data('key_1', value_1);
$("span").data('key_2', value_2);
$("span").data('key_2', value_3);
我认为这就是你想要做的,应该达到目的。:) 您可以使用
与
如果您只是希望以某种方式存储数据,那么这可能很有用。如果你还想做什么,请告诉我。或者存储什么类型的数据,以及您希望如何进一步使用它
更新
<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>
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;
}
据我所知,到目前为止,您希望动态添加插入后需要编辑的行。每行包含一些具有特定值的字段。您想将ref保存在item\u 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'));
});
我添加了一个按钮来演示。这种方法绝对避免了为每行添加不必要的DOM元素,如隐藏输入。使用.data()
可以为每个字段提供相同的多种信息,如-
$("span").data('key_1', value_1);
$("span").data('key_2', value_2);
$("span").data('key_2', value_3);
我认为这就是你想要做的,应该达到目的。:) 实际上有几种方法可以做到这一点,其中之一是:
向模板中添加一些隐藏的输入
将单击事件绑定到将隐藏跨距并显示输入的行
当然,您需要一个保存按钮,并对这些值执行一些操作,但我没有执行这一部分
一个压缩的不完全工作的演示:
实际上有几种方法可以做到这一点,其中之一是:
向模板中添加一些隐藏的输入
将单击事件绑定到将隐藏跨距并显示输入的行
当然,您需要一个保存按钮,并对这些值执行一些操作,但我没有执行这一部分
一个压缩的不完全工作的演示:
只能在锚定
元素中使用href属性。。但是你的HTML中没有标签。.item\u ref
中没有标签。Span没有href
attr。您不需要向模板中添加href值。只需添加一个事件侦听器:$('tr.template')。on('click',function(){…});只能在锚定
元素中使用href属性。。但是你的HTML中没有标签。.item\u ref
中没有标签。Span没有href
attr。您不需要向模板中添加href值。只需添加一个事件侦听器:$('tr.template')。on('click',function(){…});谢谢你的回答。href将保留指向弹出窗口的链接,该链接将用于编辑其他值。我似乎无法得到你在工作中发布的东西,因为我花了这么长时间,被牵扯进了另一个项目。非常感谢你。很好!谢谢你的回答。href将保留指向弹出窗口的链接,该链接将用于编辑其他值。我似乎无法得到你在工作中发布的东西,因为我花了这么长时间,被牵扯进了另一个项目。非常感谢你。很好!