テーブルのセルをクリックした際に、セルの中に入っている文字を太字にする方法が分からず困っています。
ちょっと複雑なテーブル構造になっているのですが、具体的には、以下のような仕様で作成しています。
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で質問しましょう!
似たような質問が見つかりました
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascriptでスロットマシン
-
【jQuery】tableループ内のIDの...
-
<JavaScript>tableタグを入力不...
-
画面表示とともに、テーブルの...
-
Selectボックスの幅を自動で広...
-
javascript作成してます。ラジ...
-
Pythonで会員サイトの自動ログ...
-
現在時刻を取得してフォームのs...
-
特定<table>内の<td>の色を変える
-
hiddenのvalueの値を変えたい
-
ラジオボタンにタブインデック...
-
javascriptで入力禁止文字をチ...
-
jspでのArrayListの値の表示
-
return trueとreturn falseの用...
-
【UWSC】HTML内のある部分を抽...
-
クリックさせたいが、click()が...
-
正規表現で複数マッチ条件で悩...
-
onchangeイベントを強制的に発...
-
数値の掛け算の不具合について
-
全てのselect要素をデフォルト...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
画面表示とともに、テーブルの...
-
selectのonChangeが動作しません
-
テーブルの行数を可変長にした...
-
テキストエリアに入力した改行...
-
【jQuery】tableループ内のIDの...
-
idの振り直しについて
-
プルダウンメニューを表の中に...
-
javascriptで画像をテーブルに...
-
javascriptで<table>背景色の取得
-
javascriptでクリックするごと...
-
jquery にて、アラートダイアロ...
-
どこに挿入?
-
動的なcheckboxのcheckedについて
-
Javascriptでテーブルタグの座...
-
javascriptで画像の移動
-
クリックごとに文字色が交互に...
-
javascriptでスロットマシン
-
<iframe>内にHTMLをランダム表...
-
連動テーブルのクロスハイライト
おすすめ情報