テーブルのセルのクリック時、セル内の文字を太くするには

質問

テーブルのセルをクリックした際に、セルの中に入っている文字を太字にする方法が分からず困っています。

ちょっと複雑なテーブル構造になっているのですが、具体的には、以下のような仕様で作成しています。
div要素上でクリックしたら、特定のセルの文字（この場合、id='text1'のセル）の文字を太字にしたいのです。
なお、OnClick時の処理は、外部JavaScriptで行います。

<table>
<tr>
<td>
<div id='div1' textid='text1' onclick="ChgText(event,this)">
<table width='100%'>
<tr>
<td width='10%'>あああ</td>
<td id='text1'>いいい</td>
</tr>
</table>
</div>
</td>
<tr>
</table>

イベント元であるdiv要素と、処理対象のTDを関係付けるために、div要素内に「textid='text1'」定義し、外部JavaScriptでは、document.getElementByIdで処理対象を特定し、最終的には、文字を太くしたいと考えています。

外部JavaScriptの概要は以下の通りです。
function ChgText(ev,item){
var text_item = null;
text_item = item.tdtext_id;
var chgText = document.getElementById(text_item );
chgText.style.font-weight = bold;
}

上記の内容で実行しても、文字の太さは変わりませんでした。
フォントの指定の仕方がまちがっているのでしょうか？
それとも、そもそも、div要素より後に定義されるTDタグのIDをdiv要素自身が認識しないのでしょうか？

根本的な考え方が間違っているかもしれないので、よきアドバイスをいただけるとありがたいです。
よろしくお願いいたします。

回答No.1

UKY · ベストアンサー

まず、div要素にtextidなんていう属性を勝手に定義している時点でちょっと……。HTMLは仕様に従って正しく書きましょう。

div要素とtd要素を関連付ける方法ですが、HTML文書内に書くのであればいっそのことChgText関数の引数にしてしまってはどうですか。
onclick="ChgText(event, this, 'text1')"

で、JavaScriptからCSSを操作する方法ですが、
chgText.style.font-weight = bold;
では chgText.style.font から weight を引いてそれに bold を代入するという意味になります。正しくは
chgText.style.fontWeight = "bold";
です。

お礼

ご回答ありがとうございます。
お返事が大変遅くなり申し訳ありません。

急いでいたので、とても助かりました。
HTMLやCSS、JavaScriptの記述の基本がまだあやふやなので、しっかり基本を勉強しなおそうと思いました。

どうもありがとうございました。