CODEWITHSUNDEEP
javascriptjquery
ScrumMaster Guy
ScrumMaster Guy

Reputation: 267

Iterate through columns' data atrributes

I am trying to dynamically set my hyperlinks strings I want to pass through by iterating over a list of table columns' data attributes while getting their name and value to create my hyperlink string.

Here is the HTML Code.

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

Here is my JS code I have. I am already looping through all table columns of the particular table I want. Starting from Var link_array = [] down a few lines is what I have got from other questions asked Using jQuery to get data attribute values with .each() but couldn't get it to do what I want. I have tried other stuff that I could think of but rather not show here since it would just confuse everyone more I think. 

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

So I need a string that would basically make the hyperlink like this

href=details.cfm?state=GA&ticketType=open&dataRange=LT8.

I see if I define an argument in the .data('state') it actually does iterate through all of the data-state attributes where I can get the values, but I would rather create something more dynamic so that when a new developer creates another data attribute in the HTML code, the JS would automatically pick up the new one.

Thanks in advance!

Code added from Z-Bone's answer.

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

                });

Upvotes: 1

Views: 140

Answers (2)

Z-Bone
Z-Bone

Reputation: 1584

EDITED

Try this new code which does it dynamically

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

Upvotes: 2

Hodrobond
Hodrobond

Reputation: 1696

altered from how to create query parameters

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/fmzwqmja/5/

Upvotes: 1

Related Questions