【发布时间】：2017-01-13 11:47:03
【问题描述】：
我正在尝试通过迭代表列的数据属性列表来动态设置我想要通过的超链接字符串，同时获取它们的名称和值来创建我的超链接字符串。
这是 HTML 代码。
<table width="85%" border="1" align="center" cellpadding="2" cellspacing="2" id="results" name="results222">
<cfoutput query="qryGetMain">
<cfset count = count + 1>
<tr>
<td align="center" class="tblHeader" nowrap>#state#</td>
<td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="open" data-dataRange="">#openTickets#</td>
<td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="closed" data-dataRange="">#closedTickets#</td>
<td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="open" data-dataRange="LT8">#openTicketsLTE8#</td>
<td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="open" data-dataRange="GT8">#openTicketsGT8#</td>
<td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="open" data-dataRange="GT15">#openTicketsGT15#</td>
<td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="open" data-dataRange="GT30">#openTicketsGT30#</td>
<td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="closed" data-dataRange="LT8">#closedTicketsLTE8#</td>
<td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="closed" data-dataRange="GT8">#closedTicketsGT8#</td>
<td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="closed" data-dataRange="GT15">#closedTicketsGT15#</td>
<td align="center" class="style6 " nowrap data-state="#state#" data-ticketType="closed" data-dataRange="GT30">#closedTicketsGT30#</td>
</tr>
</cfoutput>
</tbody>
这是我的 JS 代码。我已经遍历了我想要的特定表的所有表列。 从 Var link_array = [] 开始，几行是我从Using jQuery to get data attribute values with .each() 提出的其他问题中得到的，但无法让它做我想做的事。我已经尝试过其他我能想到但不想在这里展示的东西，因为它只会让我认为的每个人更加困惑。
$('table[name="results222"] tr').find('td').each(function() {
if($(this).text() == '0' || $(this).text() == '0.00') {
$(this).css('background','red');
}
else if ($(this).text() > 0) {
var link_array = [];
var link_array = $.map(this, function(el) {
return {name: 'state', value: $(el).data()}
});
$(this).html('<a href=details.cfm>'+$(this).text()+'</a>');
}
});
所以我需要一个基本上可以使超链接像这样的字符串
href=details.cfm?state=GA&ticketType=open&dataRange=LT8。
我看看我是否在 .data('state') 中定义了一个参数，它实际上确实遍历了我可以获得值的所有数据状态属性，但我宁愿创建一些更动态的东西，以便当一个新开发者在 HTML 代码中创建另一个数据属性，JS 会自动选择新的。
提前致谢！
从 Z-Bone 的回答中添加的代码。
$('table[name="results222"] tr').find('td').each(function() {
if($(this).text() == '0' || $(this).text() == '0.00') {
$(this).css('background','red');
}
else if ($(this).text() > 0) {
var data = $(this).data();
var href = "details.cfm?";
if (data) {
var first = true;
for (var i in data) {
if (!first) {
href += "&";
}
href += i + "=" + (data[i] || "");
first = false;
}
}
$(this).html('<a href="' + href + '">' + $(this).text() + '</a>');
}
});
【问题讨论】：
-
听起来比必要的复杂。我也认为不需要 javascript。
标签： javascript jquery