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

あるページに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ファイルを入れて、マウスカーソルが↑にあるセルの色を変えております。

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});

yambejp

2023/01/16 10:00

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

shoshin-sha

2023/01/16 10:30

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

yambejp

2023/01/16 11:36

アクティブの説明は？

int32_t

2023/01/16 21:37

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

行動規範の内容に同意します

回答2件

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

総合スコア20884

ベストアンサー

//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>