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

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

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

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

998閲覧

Javascript iframe内のtableのアクティブな行のインデックスを取得する

maedat

総合スコア4

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2023/01/16 09:12

編集2023/01/16 09:16

あるページにiframeがあり、そのiframe内にはtableが設けられております。
ページにはボタンがあり(iframeの外にあります)、そのボタンを押すと、
iframe内のtableでアクティブになっている行のインデックスを取得し、最終的に、その行をtableから削除したいです。

main.html

1<div class="botton5"> 2<input type="button" onclick="iframe_test2()" id='insert_row' class="botton_size" value="削除"> 3</div> 4 5<script> 6 function iframe_test2(){ 7 var o_iframe = document.querySelector('iframe'); 8 var table_data = o_iframe.contentWindow.document.querySelector('.editable-table tbody'); 9 var obj = table_data.document.activeElement; 10 obj.tBodies[0].deleteRow(-1); 11} 12</script> 13 14<div class="iframeBody"> 15 <iframe id="id_iframe" width="100%" height="650px" src="{{ url_for('next_page2')}}";></iframe> 16</div>

iframe.html

1<body> 2 <table border="1" class="editable-table" style="text-align: center;vertical-align:middle;"> 3 <thead> 4 <tr class=chara1> 5 <th>◎</th> 6 </tr> 7 </thead> 8 <tbody> 9 <tr class=chara2> 10 <td contenteditable="true">◎</td> 11 </tr> 12 </tbody> 13 </table> 14</body>

ちなみに、iframeには以下jsファイルを入れて、マウスカーソルが↑にあるセルの色を変えております。

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

iframe.js

1$(function() { 2 $('.matrix').find('th, td').on('mouseenter', function() { 3 // マウスカーソルがのっているセルが左から何番目かを取得 4 var idx = $(this).parent().find('th, td').index(this); 5 if (idx <= 0) return; 6 var s = '.matrix tr > *:nth-of-type(' +(idx+1)+ ')'; 7 $(s).addClass('cursor'); 8 }) 9 .on('mouseleave', function() { 10 // Classを全て削除 11 $('.matrix *.cursor').removeClass('cursor'); 12 }); 13});

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

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

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

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

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

yambejp

2023/01/16 10:00

ご自身でつまりまくっているし、もうそのiframeでやるのやめたほうが良いのでは? テーブルにアクティブなんて設定はありませんが、なにをもってアクティブと定義しているのでしょうか?
maedat

2023/01/16 10:30

おっしゃる通りです。今回はどうしてもiframeを使用したく思っております。
yambejp

2023/01/16 11:36

アクティブの説明は?
int32_t

2023/01/16 21:37

ボタンを押したときにブラウザの開発者ツールのコンソールにエラーが出ているはずです。エラーは重要情報なので質問文に含めてください。
guest

回答2

0

js

1 var obj = table_data.document.activeElement; 2 obj.tBodies[0].deleteRow(-1);

obj はフォカースされた <td><body> を指します。どちらにも tBodies というプロパティはないので、その行でエラーが出ていると思います。

js

1let row = o_iframe.contentWindow.document.activeElement.closest('tr'); 2if (row) 3 row.remove();

iframe_test2() はこんなふうに変更すればいいでしょう。

投稿2023/01/16 21:43

int32_t

総合スコア20860

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

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

0

ベストアンサー

//sample.html

HTML

1<table border="1"> 2<thead> 3<tr> 4<th>test</th> 5</tr> 6</thead> 7<tbody> 8<tr> 9<td contenteditable="true">test1</td> 10</tr> 11<tr> 12<td contenteditable="true">test2</td> 13</tr> 14<tr> 15<td contenteditable="true">test3</td> 16</tr> 17<tr> 18<td contenteditable="true">test4</td> 19</tr> 20</tbody> 21</table>

javascript

1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 const o_iframe = document.querySelector('iframe'); 4 let table_data; 5 let del_target; 6 o_iframe.addEventListener('load',()=>{ 7 table_data = o_iframe.contentWindow.document.querySelector('.editable-table tbody'); 8 table_data.addEventListener('click',e=>{ 9 del_target=e.target.closest('tr'); 10 }); 11 }); 12 del_row.addEventListener('click',()=>{ 13 del_target?.remove(); 14 }); 15}); 16</script> 17<input type="button" id='del_row' class="botton_size" value="削除"> 18<div class="iframeBody"> 19<iframe id="id_iframe" width="100%" height="650px" src="sample.html"></iframe> 20</div>

投稿2023/01/16 12:29

yambejp

総合スコア114823

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問