あるページに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});
回答2件