迭代列的数据atrributes

时间:2017-01-12 23:26:49

标签: javascript jquery

我正在尝试通过遍历表列的数据属性列表来动态设置我想要传递的超链接字符串,同时获取它们的名称和值以创建我的超链接字符串。

这是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状态= GA&安培; ticketType =开放&安培; 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>');
                    }

                });

2 个答案:

答案 0 :(得分:2)

<强> EDITED

尝试这个动态执行的新代码

&#13;
&#13;
$('table[name="results222"] tr').find('td').each(function () {
	if ($(this).text().length == 0) {
		$(this).css('background', 'red');
	} else if ($(this).text().length > 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>');
	}
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>   

    </table>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

SET

改变
function paramaterizeData(data) {
   let ret = [];
   for (let d in data)
     ret.push(d + '=' + data[d]);
   return '?'+ret.join('&');
}
var data = { 'state': 'state54', 'ticket_type': 'open', 'dataRange': 'LT8' };
var querystring = paramaterizeData(data);

https://jsfiddle.net/6a26c595/