I’ve created a dynamic product comparison chart. It’s basically to which data is written to individual cells if the selection changes in the thead dropdown. I now want to add an array called “tlink” which will dynamically changes the “to website” button.
The table
<table class="table table-bordered table-striped">
<thead>
<tr>
<th class="center"><strong>Select Product:</strong></th>
<th>
<select class="col2 select">
<option>Prod1</option>
<option>Prod2</option>
<option>Prod3</option>
<option>Prod4</option>
<option>Prod5</option>
<option>Prod6</option>
</select>
</th>
<th>
<select class="col3 select">
<option>Prod2</option>
<option>Prod3</option>
<option>Prod4</option>
<option>Prod5</option>
<option>Prod6</option>
</select>
</th>
<th>
<select class="col4 select">
<option>Prod3</option>
<option>Prod4</option>
<option>Prod5</option>
<option>Prod6</option>
</select>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Logo</strong></td>
<td class="col2 logo"><img src="http://www.ar-productions.eu/images/demo/arp-compare-demo1.jpg"></td>
<td class="col3 logo"><img src="http://www.ar-productions.eu/images/demo/arp-compare-demo2.jpg"></td>
<td class="col4 logo"><img src="http://www.ar-productions.eu/images/demo/arp-compare-demo3.jpg"></td>
</tr>
<tr>
<td><strong>Details 1</strong></td>
<td class="col2 d1"><img src="http://www.ar-productions.eu/images/icons/green-tick.png"></td>
<td class="col3 d1"><img src="http://www.ar-productions.eu/images/icons/red-x.png"></td>
<td class="col4 d1"><img src="http://www.ar-productions.eu/images/icons/green-tick.png"></td>
</tr>
<tr>
<td><strong>Details 2</strong></td>
<td class="col2 d2">Some Details</td>
<td class="col3 d2">Details go here</td>
<td class="col4 d2">Details or some other things</td>
</tr>
<tr>
<td><strong>Details 3</strong></td>
<td class="col2 d3">More text about this</td>
<td class="col3 d3">wow, more text</td>
<td class="col4 d3">More details go here wow</td>
</tr>
<tr>
<td><strong>Details 4</strong></td>
<td class="col2 d4">Even more details here</td>
<td class="col3 d4">Even more text and details</td>
<td class="col4 d4">Almost forgot - more here</td>
</tr>
<tr>
<td><strong>Rating Icons</strong></td>
<td class="col2 rating">3 stars</td>
<td class="col3 rating">1 stars</td>
<td class="col4 rating">5 stars</td>
</tr>
<tr>
<td><strong>Link to website</strong></td>
<td class="col2 tlink"><a href="#" target="_blank" class="button-more">Link Button</a></td>
<td class="col3 tlink"><a href="#" target="_blank" class="button-more">Link Button</a></td>
<td class="col4 tlink"><a href="#" target="_blank" class="button-more">Link Button</a></td>
</tr>
</tbody>
</table>
The script
var data = {
"details":
{
"info": [
{
"name": "Prod1",
"logo": "http://www.ar-productions.eu/images/demo/arp-compare-demo1.jpg",
"d1": "http://www.ar-productions.eu/images/icons/green-tick.png",
"d2": "Some Details",
"d3": "More textsbout this",
"d4": "Even more details here",
"rating": "3 stars",
"tlink": ""
},
{
"name": "Prod2",
"logo": "http://www.ar-productions.eu/images/demo/arp-compare-demo2.jpg",
"d1": "http://www.ar-productions.eu/images/icons/red-x.png",
"d2": "Details go here",
"d3": "wow, more text",
"d4": "Even more text and details",
"rating": "1 star",
"tlink": ""
},
{
"name": "Prod3",
"logo": "http://www.ar-productions.eu/images/demo/arp-compare-demo3.jpg",
"d1": "http://www.ar-productions.eu/images/icons/green-tick.png",
"d2": "Details or some other things",
"d3": "More details go here wow",
"d4": "Almost forgot - more here",
"rating": "5 stars",
"tlink": ""
},
{
"name": "Prod4",
"logo": "http://www.ar-productions.eu/images/demo/arp-compare-demo4.jpg",
"d1": "http://www.ar-productions.eu/images/icons/red-x.png",
"d2": "Some other things",
"d3": "What should I say",
"d4": "details go here wow",
"rating": "4 stars",
"tlink": ""
},
{
"name": "Prod5",
"logo": "http://www.ar-productions.eu/images/demo/arp-compare-demo5.jpg",
"d1": "http://www.ar-productions.eu/images/icons/green-tick.png",
"d2": "Dunno what to say",
"d3": "Nice Optics",
"d4": "State of the art blabla",
"rating": "4 stars",
"tlink": ""
},
{
"name": "Prod6",
"logo": "http://www.ar-productions.eu/images/demo/arp-compare-demo6.jpg",
"d1": "http://www.ar-productions.eu/images/icons/red-x.png",
"d2": "cheap case",
"d3": "pictures pixeled",
"d4": "red eyes from flash",
"rating": "1 star",
"tlink": ""
}
]}
};
$(".select").change(function() {
var jthis = $(this);
var whichCol;
if (jthis.hasClass("col2")) {
whichCol = "col2";
} else if
(jthis.hasClass("col3")) {
whichCol = "col3";
} else if
(jthis.hasClass("col4")) {
whichCol = "col4";
}
$.each(data.details.info, function(i, v) {
if (v.name == jthis.val()) {
$("td." + whichCol + ".name").html(v.name);
$("td." + whichCol + ".logo").html("<img src='" + v.logo + "' />");
$("td." + whichCol + ".d1").html("<img src='" + v.d1 + "' />");
$("td." + whichCol + ".d2").html(v.d2);
$("td." + whichCol + ".d3").html(v.d3);
$("td." + whichCol + ".d4").html(v.d4);
$("td." + whichCol + ".rating").html(v.rating);
$("td." + whichCol + ".tlink").html(v.tlink);
return;
}
});
});
You can also see the chart in action on my jfiddle. The string to load is:
<a href="#" target="_blank" class="button-more">Link Button</a>
as you can see this already contains a class which is part of the theme framework drawing a CSS button. So I need to be able to call the exact string.
Thanks in advance!
Just use the line
to set the inner HTML of your td cell.
As v.tlink is set as the href attribute, just set http://www.google.com as the tlink in your data.