質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

292閲覧

jQueryでtableを作成するコードの内容が読み解けなくて困っています。

taka_oct092018

総合スコア133

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2022/10/03 17:58

  1. const elm = $('div'); このコードは最後の<div></div>を指し示しているのでしょうか。
  2. 最後の<div></div>はどのような理由で存在しているのか。<table>に追加する<tr><td>に必要な理由が分かりません。
  3. なぜfunction row(elm)に渡された$('div')は実行後のHTMLには<div>として生成されていないのでしょうか。elm.css(key, value)により、transparentが設定されて透明だからなのでしょうか。(開発者ツールで確認)
  4. <tbody>は自動的に生成されて組み込まれるのでしょうか。よろしくお願い致します。

改訂新版jQuery本格入門 サンプルコード P200より。一部編集済み。

HTML

1<!-- 実行前のHTML --> 2<table> 3 <tr> 4 <th>CSS</th> 5 <th>width</th> 6 <th>innerWidth</th> 7 <th>outerWidth</th> 8 </tr> 9</table> 10<div></div><!-- 存在理由が分かりにくいdivタグ -->

HTML

1<!-- 実行後のHTML --> 2<table> 3 <tbody> 4 <tr> 5 <th>CSS</th> 6 <th>width</th> 7 <th>innerWidth</th> 8 <th>outerWidth</th> 9 </tr> 10 <tr> 11 <td>border:5px solid transparent</td> 12 <td>100</td> 13 <td>100</td> 14 <td class="red">109</td> 15 <tr> 16 <tr> 17 <td>margin:10</td> 18 <td>100</td> 19 <td>100</td> 20 <td class="red">109</td> 21 <tr> 22 <tr> 23 <td>padding:20</td> 24 <td>100</td> 25 <td class="red">140</td> 26 <td class="red">149</td> 27 <tr> 28 </tbody> 29</table> 30<div style="border: 5px solid transparent; margin: 10px; padding: 20px;"></div>

jQuery

1function row(elm) { 2 return `<td>${ Math.trunc($(elm).width())} </td> 3 <td>${ Math.trunc($(elm).innerWidth()) }</td> 4 <td>${ Math.trunc($(elm).outerWidth()) }</td>`; 5} 6 7// 設定を追加していくCSS 8const css = { 9 'border' : '5px solid transparent', 10 'margin' : '10px', 11 'padding' : '20px' 12}; 13 14// CSSを追加し、その後の要素の幅を表示 15$.each(css, function(key, value) { // key: プロパティ名, value: プロパティの値 16 const elm = $('div'); 17 elm.css(key, value); 18 $('table').append($(`<tr><td>${ key }:${ value }</td>${ row(elm) }</tr>`)); 19}); 20 21// 幅が100を超えたところは赤い太字 22$('table td').each(function() { 23 const width = Math.trunc($(this).text()); 24 if (width > 100) { $(this).addClass('red'); } 25});

CSS

1table { 2 border-collapse : collapse; 3} 4 5table td, 6table th { 7 border : 1px solid black; 8 padding : 5px; 9} 10 11table td.red { 12 color : red; 13 font-weight : bold; 14} 15 16table td { 17 text-align : right; 18} 19 20table tr td:first-child { 21 font-weight : bold; 22 text-align : left; 23} 24 25div { 26 border : none; 27 height : 100px; 28 margin : 0; 29 padding : 0; 30 width : 100px; 31}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

  1. はい
  2. 色々なスタイルで測った div の幅を表にするのがこのコードの目的に見えます。
  3. 「実行後のHTML」の最後に存在します。注: JavaScriptコードではいっさいdivを生成していません。HTML中にあるものを操作しているだけです。
  4. はい

投稿2022/10/04 00:50

int32_t

総合スコア20659

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

taka_oct092018

2022/10/06 08:05

int32_t様、返信ありがとうございます。 表の幅を調整するためにHTMLに<div>を設置しているのですか…。 コードの意図を読み取るのは難しいですね。
int32_t

2022/10/06 08:08

> 表の幅を調整するためにHTMLに<div>を設置しているのですか…。 いいえ、<div> の情報を表示するためにテーブルを設置しているのだと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問