htmlファイルにiframeが１つあり、そのifameの中にTableタグがあります。
ボタンはiframeの外にあります。
そのボタンを押すと、iframe内のTableの最後尾に行を1行追加したいです。

index.html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4</head>
5
6<body>
7～省略～
8
9<div class="botton4">
10    <input type="button" onclick="iframe_test()" id='insert_row' class="botton_size" value="挿入">
11</div>
12
13～省略～
14
15   <script>
16     function iframe_test(){
17       var o_iframe = document.getElementByTagName('iframe');
18       var table_data = o_iframe.contentWindow.getElementByClassName('editable-table');
19       var newRow = table_data.insertRow(-1);
20       }
21   </script>
22
23    <div class="iframeBody">
24        <iframe id="id_iframe" width="100%" height="650px"  src="{{ url_for('next_page2')}}";></iframe>
25    </div>
26  </body>
27

↓↓iframeのhtml↓↓

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

var変数が悪かったりするのでしょうか。

int32_t

2023/01/16 05:08

ボタンを押したときにブラウザの開発者ツールのコンソールにエラーが出ますか?

shoshin-sha

2023/01/16 05:19

next_page:177 Uncaught TypeError: document.getElementByTagName is not a function at iframe_test (next_page:177:29) at HTMLInputElement.onclick (next_page:165:93) iframe_test @ next_page:177 onclick @ next_page:165

int32_t

2023/01/16 05:19

質問文のコードを見る限りエラーが出るはずなので、質問文のコードと試しているコードが一致してない可能性があります。

shoshin-sha

2023/01/16 05:19

すみません。出てました。

int32_t

2023/01/16 05:20

おっと、入れ違いでしたね。

int32_t

2023/01/16 05:20

そのエラーの直し方はわかりますか。

shoshin-sha

2023/01/16 05:23

わかりません。どのような意味なのでしょうか。

int32_t

2023/01/16 05:40

書いてあるとおり、document.getElementByTagName という関数はない、という意味です。document.getElementsByTagName と書くつもりだったのでしょう。(sが抜けている)

shoshin-sha

2023/01/16 05:45

ありがとうございます。

回答1件

ベストアンサー

javascript
1function iframe_test(){
2  var o_iframe = document.querySelector('iframe');
3  var table_data = o_iframe.contentWindow.document.querySelector('.editable-table tbody');
4  var newRow = table_data.insertRow(-1);
5}

調整

挿入をわかりやすく調整

javascript
1function iframe_test(){
2  var o_iframe = document.querySelector('iframe');
3  var table_data = o_iframe.contentWindow.document.querySelector('.editable-table tbody');
4  var newRow = table_data.insertRow(-1);
5  var newCell=newRow.insertCell(-1);
6  newCell.textContent="test";
7}