動的な製品比較チャートを作成しました。基本的に、広告ドロップダウンで選択が変更された場合に、個々のセルに書き込まれるデータです。ここで、「Webサイトへ」ボタンを動的に変更する「tlink」という配列を追加します。
テーブル
<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>
スクリプト
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;
}
});
});
また、私のjfiddleで動作中のチャートを見ることができます。ロードする文字列は次のとおりです。
<a href="#" target="_blank" class="button-more">Link Button</a>
ご覧のとおり、これには、CSSボタンを描画するテーマフレームワークの一部であるクラスがすでに含まれています。したがって、正確な文字列を呼び出すことができる必要があります。
前もって感謝します！