
テーブルのセルをクリックした際に、セルの中に入っている文字を太字にする方法が分からず困っています。
ちょっと複雑なテーブル構造になっているのですが、具体的には、以下のような仕様で作成しています。
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ベストアンサー
- 回答日時:
まず、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の記述の基本がまだあやふやなので、しっかり基本を勉強しなおそうと思いました。
どうもありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
selectのonChangeが動作しません
-
tbody要素のinnerHTMLが書き換...
-
return trueとreturn falseの用...
-
<input>の選択肢をプルダウンメ...
-
特定<table>内の<td>の色を変える
-
selectを変更不可にしたい
-
ラジオボタンが選択されたらテ...
-
プルダウンで選択すると、DBの...
-
onclickをEnterキーでも行いたい
-
onchangeイベントを強制的に発...
-
チェックボックスのON/OFFでVal...
-
【javascript・PHP】プルダウン...
-
チェックボックス付きのテーブ...
-
データベースからのarray を j...
-
slickのレスポンシブ > center...
-
jsで質問です。 ボタンが二つ存...
-
jquery.validate.jsについて
-
hiddenのvalueの値を変えたい
-
ハイパーリンクを別ウインドウ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
selectのonChangeが動作しません
-
画面表示とともに、テーブルの...
-
新しいウィンドをリンク指定し...
-
jquery にて、アラートダイアロ...
-
指定のテキストをクリックする...
-
テーブルの行数を可変長にした...
-
写真の下に説明文
-
html内>テーブル内に複数のjav...
-
Javascriptでテーブルタグの座...
-
【jQuery】tableループ内のIDの...
-
クリックごとに文字色が交互に...
-
javascript でテーブル操作
-
javascriptのカルーセル
-
a9のサイトの仕組み
-
appendChildとinnerHTMLを短く
-
javascriptでクリックするごと...
-
テキストエリアに入力した改行...
-
tbody要素のinnerHTMLが書き換...
-
外部のデータファイルの読み込...
おすすめ情報