- 締切済み
HTMLでの表の作成
下記の表をHTMLで作成しないといけないのですがどうすればよろしいでしょうか。計算のところはそれぞれJavaScriptを使って加算～除算までを表の横に並んでいる2つの数字を使ってon C lickのイベントハンドラを使って作らないといけません。（上から二段目左から四行目のところだとa0の24とb0の12をJavaScriptで足し算の答えの36ができるようなJavaScriptを作る必要があります。） <script> var a = new A rray(3); var a = new Array(3); a[0]=24; a[1]=100; a[2]=123; b[0]=12; b[1]=10; b[2]=41; に続くようにお願いします。 宜しければHTMLで回答していただけると幸いです。 よろしくお願い致します。
- tsuyakus
- お礼率0% (0/8)
- JavaScript
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
何かの課題の回答は斬新だとウケると思います。 実質３行で収まりました。その後の評価が知りたいです。 <style> tr:first-of-type *, td:first-of-type { background:#86f;width: 4em; } td{text-align: center;} </style> <body> <table border="1" id="T"></table> <script> var a = new Array(3); var b = new Array(3); a[0]=24; a[1]=100; a[2]=123; b[0]=12; b[1]=10; b[2]=41; let p=Object.assign(document.createElement ('input'),{type:'button',value:'計算'}); a.reduce((n,a,i)=>[...n,[i,a,b[i],...'....']],['添字,a,b,加算,減算,乗算,除算'.split`,`]).forEach(n=>n.reduce((t,i)=>(i=='.'?t.insertCell().appendChild(p.cloneNode(!0)):t.insertCell().textContent=i,t),T.insertRow())); T.addEventListener ('click',({target:e},a,b)=> 'button'!=e.type || ([,a,b]=Array.from(e.closest('tr').querySelectorAll('td'),e=>Number(e.textContent)), alert([,,,a+b,a-b,a*b,a/b][e.closest('td').cellIndex])) ); </script>
- okwavey6
- ベストアンサー率17% (99/553)
>下記の表をHTMLで作成しないといけないのですがどうすればよろしいでしょうか。 まず、どう考えても技術者ではないだろうから、作成しないといけない理由を正直に書けば、同情で回答してもらえるかもひれないので、そうしたら良いですよ。 その前に、質問を正しく出来るように考えましょう。 >計算のところは 計算のところ？計算と表示されているボタンのこと？実際に計算する処理のこと？他にもあるかもしれないけど、何のことを言っているのか明確に。１つしか意味を持たないように説明しなければいけません。 >それぞれJavaScriptを使って加算～除算までを 別に、減算や乗算は、加算と除算の間のものと言う意味はないですよ。 加算～除算までの計算ボタンだったらわかりますけど。 >表の横に並んでいる2つの数字を使って はい。 >on C lickのイベントハンドラを使って作らないといけません。 「on C lick」？オンシーリックと読めば良いですか？ 勝手にないものを作らない。 「onClick」と書いてオンクリックです。 >（上から二段目左から四行目のところだとa0の24とb0の12をJavaScriptで足し算の答えの36ができるようなJavaScriptを作る必要があります。） まず、何の話ですか？ 添付ファイルの表の、と断らなければいけません。 次に、行の使い方がおかしく、段は使いません。 項目を含めて二行四列目と言います。 また、a0？a[0]ではないの？b0でもなくb[0]ではないの？ 認識や説明がはちゃめちゃです。 スクリプト自体にも同様の問題があります。 「A rray(3)」？「Array(3)」ですよね？ >に続くようにお願いします。 だから続かずにそこでエラーが起きて終了です。何も続きません。 【あなたが作成するのは何ですか？】 これだけはしっかり説明出来ないと、教えてもらうことさえ出来ません。 HTMLで表は作れますね。 表示するだけです。 JavaScriptでスクリプトは書けますね。 そのスクリプトでHTMLの表を作ることも出来ますね。 添付画像と説明でどう解釈してもわからないところとして、計算結果をどうやって出力するの？ 計算ボタンを押したら、どうなるの？ 計算結果をキャラクターが出て来て読み上げたら良いの？ 画面中央にポップアップして表示したら良いの？それとも、表のどこかに表示するの？ 分からないから、どうしようもないし出力しないから、計算する意味もないと思います。
- asciiz
- ベストアンサー率70% (6809/9681)
うーん、なんだか、学校で出された宿題か何かですか? それだったら、自分で考えて、書いて、動かしてみて、修正して…と自分の手を動かしてみなければ、自分で組む力がつかないと思うのですが。 自分ではどこまでできたでしょうか。 例えば、配列aに3つの値を入れて、その数だけtable表を出力する、ボタンを押されたらその値を(alert通知で)表示する、というJavascript(を含むHTMLファイル)は以下のような感じになります(一例)。 これを改造していけば、回答の一つになると思いますがどうでしょう。 ----以下をhtmlファイルとして保存---- <html> <head> <title>array test</title> <script> <!-- 定数定義 --> var a = new Array(3); a[0]=24; a[1]=100; a[2]=123; </script> <script> function buttonClick(x) { alert(x); } </script> </head> <body> <!-- ヘッダ部分 --> <table border> <tr><th>添字</th><th>a</th><th>表示</th></tr> <!-- 内容部分、繰り返し --> <script> for (var i = 0; i < a.length; i++) { document.write('<tr>'); document.write('<td>' + i + '</td><td>' + a[i] + '</td>'); document.write('<td><input type="button" value="表示" onclick="buttonClick(a[' + i + '])"></td>'); document.write('</tr>'); } </script> </table> </body> </html> ----ここまで----
- bya00417
- ベストアンサー率34% (58/170)
JavaScript を HTML で答えると言うのは無理がある。 英語を日本語で教えてくれと言っているようなものです。
