パラメータ“ itemgrp2cd ”のみが違う 3つの a タグリン

質問

パラメータ“ itemgrp2cd ”のみが違う 3つの a タグリンクのうち 1つ をクリックし遷移すると
クリックしたリンクがボールドのCSSが適用されるようにしたいのです。

<table border="0" cellpadding="0" cellspacing="0" id="orderArea">
<tr>
<td class="itemgrp2cd-bg"><a href="http://xxxxxxx.jp/search/list.asp?itemgrp1cd=ob&itemgrp2cd=bg&shopcd=17112">ほげアイテム１</a></td>
<td class="itemgrp2cd-cl"><a href="http://xxxxxxx.jp/search/list.asp?itemgrp1cd=ob&itemgrp2cd=cl&shopcd=17112">ほげアイテム２</a></td>
<td class="itemgrp2cd-tb"><a href="http://xxxxxxx.jp/search/list.asp?itemgrp1cd=ob&itemgrp2cd=tb&shopcd=17112">ほげアイテム３</a></td>
</tr>
</table>

「ほげアイテム１」をクリックすると、.itemgrp2cd-bg の a タグに

.bold {
font-weight:bold;
text-decoration: none;
cursor:text;
}

が適用される様に、です。

毎度つたない説明で申し訳ないのですが、
自分の説明がうまく伝わってるか不安なので、
イメージ画像を添付させていただきます。

回答No.1

yyr446

これでいいですか
<td class="itemgrp2cd-bg"><a href="http://xxxxxxx.jp/search/list.asp?itemgrp1cd=ob&itemgrp2cd=bg&shopcd=17112">ほげアイテム１</a></td>
<td class="itemgrp2cd-cl"><a href="http://xxxxxxx.jp/search/list.asp?itemgrp1cd=ob&itemgrp2cd=cl&shopcd=17112">ほげアイテム２</a></td>
<td class="itemgrp2cd-tb"><a href="http://xxxxxxx.jp/search/list.asp?itemgrp1cd=ob&itemgrp2cd=tb&shopcd=17112">ほげアイテム３</a></td>
</tr>
</table>
<script>
<!--
var links=document.getElementById("orderArea").getElementsByTagName("a");
for(var i=0;i<links.length;i++){
links[i].onclick = function(e){
for(var j=0;j<links.length;j++){links[j].className="";}
var target = e?e.target:event.srcElement;
target.className="bold";
}
}
// -->
</script>

補足

申し訳ございません。
試してみたのですが、クリックしてもボールドにならず何も起こりません。