Q&A
getRowCol関数がどこでも実行されていないように見えますがどこで実行するのでしょうか？
onButtonClick関数と差し替えると正常に動作しているように見えます
初めまして。現在JavaScriptの学習をしているものです。
JavaScriptを用いて、以下のイメージ写真のようにテーブル数をカウントし
「"以下" + row + " 件の書籍を削除してもよろしいでしょうか？"」
という文言で画面上部に表示させようとしているのですが、現在の私のソースコードでは画面に何も表示されません。
どのようにしたら、テーブル数をカウントしカウントした数を表示させることができるのでしょうか。
ソースコードなどを見て、気になる箇所などございましたらご教授いただけたらと思います。
どうぞよろしくお願いいたします。
HTML
1<!DOCTYPE html> 2 3 4<head> 5 <meta charset="UTF-8"> 6 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" 7 integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> 8 9 <!-- JS, Popper.js, and jQuery --> 10 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" 11 integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 12 crossorigin="anonymous"></script> 13 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" 14 integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 15 crossorigin="anonymous"></script> 16 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" 17 integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" 18 crossorigin="anonymous"></script> 19 <link rel="stylesheet" href="entire.css"> 20 21 <script> 22 function onButtonClick() { 23 var ret = window.confirm("削除した書籍情報は二度と復元できませんがよろしいでしょうか"); 24 if (ret == true) { 25 return true; 26 } else { 27 return false; 28 } 29 } 30 </script> 31</head> 32 33 34 35<body> 36 37 <div class="container"> 38 39 <script> 40 function getRowCol() { 41 //行数取得 42 var row = tbl1.rows.length; 43 44 //列数取得（rowsの引数には行インデックス番号を指定します） 45 var col = tbl1.rows[1].cells.length; 46 47 //結果表示 48 alert("以下" + row + " 件の書籍を削除してもよろしいでしょうか？"); 49 } 50 </script> 51 52 <div class="scroll-table"> 53 54 <table id="tbl1" class="table table-bordered" style="table-layout:fixed; width:100%;"> 55 <thead> 56 <tr class="table-info"> 57 <th scope="col" style="table-layout:fixed; width:13%;"> 58 書籍名 59 </th> 60 <th scope="col"> 61 出版社 62 </th> 63 <th scope="col"> 64 著者 65 </th> 66 <th scope="col"> 67 メインジャンル 68 </th> 69 <th scope="col"> 70 サブジャンル 71 </th> 72 <th scope="col"> 73 価格(円) 74 </th> 75 <th scope="col"> 76 冊数(冊) 77 </th> 78 </tr> 79 </thead> 80 <tbody> 81 <tr> 82 <td>ああああああああああああああああああああああああああああああああああああああああああああああああああ</td> 83 <td>あああああああああああああああああああああああああ</td> 84 <td>あああああああああああああああああああああああああ</td> 85 <td>ああああああああああ</td> 86 <td>ああああああああああああああ</td> 87 <td>999,999</td> 88 <td>999</td> 89 </tr> 90 <tr> 91 <td>ああああああああああああああああああああああああああああああああああああああああああああああああああ</td> 92 <td>あああああああああああああああああああああああああ</td> 93 <td>あああああああああああああああああああああああああ</td> 94 <td>ああああああああああ</td> 95 <td>ああああああああああああああ</td> 96 <td>999,999</td> 97 <td>999</td> 98 </tr> 99 <tr> 100 <!--<td colspan="2">Larry the bird</td>--> 101 <td>ああああああああああああああああああああああああああああああああああああああああああああああああああ</td> 102 <td>あああああああああああああああああああああああああ</td> 103 <td>あああああああああああああああああああああああああ</td> 104 <td>ああああああああああ</td> 105 <td>ああああああああああああああ</td> 106 <td>999,999</td> 107 <td>999</td> 108 <tr> 109 <!--<td colspan="2">Larry the bird</td>--> 110 <td>ああああああああああああああああああああああああああああああああああああああああああああああああああ</td> 111 <td>あああああああああああああああああああああああああ</td> 112 <td>あああああああああああああああああああああああああ</td> 113 <td>ああああああああああ</td> 114 <td>ああああああああああああああ</td> 115 <td>999,999</td> 116 <td>999</td> 117 </tr> 118 </tr> 119 </tbody> 120 </table> 121 </div> 122 <style> 123 .scroll-table { 124 overflow: auto; 125 } 126 127 td { 128 word-wrap: break-word; 129 } 130 </style> 131 <br> 132 <div class="col text-center"> 133 <button type="submit" class="btn btn-danger btn-scarlet" onclick="return onButtonClick();">削除</button> 134 <button type="button" class="btn btn-outline-danger">キャンセル</button> 135 </div> 136 137</body>
調べながら、修正しています。このようなソースコードに修正をしてみましたが、何も表示されません、、、、
JavaScript
1 <script> 2 3 //行数取得 4 var row = tbl1.rows.length; 5 6 //列数取得（rowsの引数には行インデックス番号を指定します） 7 var col = tbl1.rows[1].cells.length; 8 9 //結果表示 10 document.write("以下" + row + " 件の書籍を削除してもよろしいでしょうか？"); 11 12 </script>
失礼いたしました。
確かに、削除ボタンを押下したらポップアップとして文言が表示されることが確認できました。
しかし、私としてはボタン押下時ではなく、画面が表示された瞬間に表示させたく思っており、これをどのようにすればよいのかなと思い悩んでいます。
画像を追加したのでよろしければご確認いただけたらと思います。
どうぞよろしくお願いいたします。
>画面が表示された瞬間に
何も押してないのにアラートが出る仕様はユーザーに困惑を与えると思うのですが、どういう意図でしょうか。
グローバル空間で関数呼び出せば即実行はされますけど…
回答1件
0
ベストアンサー
jQueryを読み込んでいるようなので、head要素に
HTML
1 <script> 2 $(function () { 3 var row = tbl1.rows.length - 1; 4 $("#hogehoge").text("以下" + row + " 件の書籍を削除してもよろしいでしょうか？"); 5 }); 6 </script>
を追加して、表示したい場所に、
HTML
1<p id="hogehoge"></p>
を入れとけばいいのでは。
それより、HTMLファイルにhtml要素がなかったり、何カ所かゼロ幅スペース(U+200B)が混入しているのが気になる。
投稿2020/08/11 10:26
編集2020/08/11 13:22
総合スコア11990
ありがとうございます。
無事に出力することはできました、、、、！
jQueryを読み込んでしまうと、
<script>
//行数取得
var row = tbl1.rows.length;
//列数取得（rowsの引数には行インデックス番号を指定します）
var col = tbl1.rows[1].cells.length;
//結果表示
document.write("以下" + row + " 件の書籍を削除してもよろしいでしょうか？");
</script>
のようなJavaScriptの表現は使うことができないのでしょうか、、、
勉強不足で申し訳ないですが、ご教授いただければ幸いです。
どうぞよろしくお願いいたします。
いや、jQueryを読み込むかどうかに関係なく、その書き方で埋め込めるのは、「表より後の部分」だけですよ。試しに、table要素より後に置いてみてください。
それから、行数は見出し行も含むので -1 しないといけません。
ご丁寧にありがとうございます。
自分でソースコードをいじりながら確認してみます。
ありがとうございました。
あなたの回答
tips
プレビュー
