jQuery在window.open上向表中添加行答案

【问题标题】：jQuery get add row to table on window.openjQuery在window.open上向表中添加行
【发布时间】：2017-05-09 17:57:22
【问题描述】：

我正在尝试创建一个剪贴板框，我可以在其中将父页面/窗口上的表格中的一些列复制到弹出窗口。

父窗口元素：

每行带有复选框的表格（选择）
用于将行复制到另一个窗口表的按钮

弹出窗口元素：

没有行的表（仅 tbody）

文件 1：父窗口的 JavaScript 文件

         $("#button_copy").on("click", function() {
            var l_url = "<?php echo base_url(); ?>clipboard/";
            var l_name = "ClipboardWindow";
            var l_height = 500;
            var l_width = 1000;

            var l_params = 'status=1' +
                           ',resizable=1' +
                           ',scrollbars=1' +
                           ',width=' + l_width +
                           ',height=' + l_height +
                           ',left=0' +
                           ',top=0';

            // get selected rows details
            var table_result = $("#table_result");
            var row_contents = [];
            $('input:checkbox:checked', table_result).map(function() {
                var row = [];
                row['item_code'] = $(this).closest('tr').find('.row_item_code').text();
                row['sales_description'] = $(this).closest('tr').find('.row_sales_description').text();
                row['buy_description'] = $(this).closest('tr').find('.row_buy_description').text();
                row['sell'] = $(this).closest('tr').find('.row_sell').text();
                row['buy'] = $(this).closest('tr').find('.row_buy').text();

                row_contents.push(row);
            });
            // display selected rows on the pop up window
            var row_html = "";
            row_contents.forEach(function(row) {
                row_html = row_html + "<td>" + row['item_code'] + "</td>";
                row_html = row_html + "<td>" + row['sales_description'] + "</td>";
                row_html = row_html + "<td>" + row['buy_description'] + "</td>";
                row_html = row_html + "<td>" + row['sell'] + "</td>";
                row_html = row_html + "<td>" + row['buy'] + "</td>";
            });

            if ((myWindow == null) || (myWindow.closed)) {
                console.log("new window");
                // open pop up window and get document for processing
                myWindow = window.open(l_url, l_name, l_params);
                myWindow.document.getElementById("tbody_result").append("<tr>" + row_html + "</tr>");
            } else {
                console.log("existing window");
                myWindow.document.getElementById("tbody_result").append("<tr>" + row_html + "</tr>");
            }
        });

文件2：弹出窗口的HTML文件：

                        <div class="panel-body">
                        <table width="100%" class="table table-striped table-bordered table-hover" id="table_clipboard">
                            <thead>
                                <tr>
                                    <th>Item Code</th>
                                    <th>Sales Description</th>
                                    <th>Buy Description</th>
                                    <th>Sell</th>
                                    <th>Buy</th>
                                </tr>
                            </thead>
                            <tbody id="tbody_result">
                            </tbody>
                        </table>
                        <!-- /.table-responsive -->
                    </div>

我无法让它工作。这是我的问题：

window.open 时未创建该行
初始错误：TypeError: Cannot read property 'append' of null 可能自调用后 dom 尚未加载？
JS 会追加新行，但仅在上一次按钮单击加载页面之后（没关系）
JS 仅追加 1 行 1 列，不是 HTML 格式而是文本（下图）

【问题讨论】：

为什么不使用模态对话框，为什么要弹出窗口？
@skobaljic 它可能需要另一个页面，以便可以关闭父窗口或从搜索中更改父页表的内容。这个新窗口将包含他们需要复制的所有项目以加快流程。
您附加的每一行都应包含在<tr> 中，而不是 all html 中的一个表行中。
HTMLElement 上没有 append 函数。您可能正在寻找appendChild，但这并不需要HTML 文本。我想你想改用$('#tbody_result', myWindow.document)。
@skobaljic 我想我把它包含在了附录中 append("<tr>" + row_html + "</tr>"); 我会修改这个.. 谢谢

标签： javascript jquery html

【解决方案1】：

我正在回答我的问题，因为我找到了一些解决我在问题中列举的其他问题的方法，而且还没有人发布答案。

问题 1 & 2 已解决：代替以下代码：

       if ((myWindow == null) || (myWindow.closed)) {
            console.log("new window");
            // open pop up window and get document for processing
            myWindow = window.open(l_url, l_name, l_params);
            myWindow.document.getElementById("tbody_result").append("<tr>" + row_html + "</tr>");
        }

我使用以下方法检查是否加载了 DOM：

           if ((myWindow == null) || (myWindow.closed)) {
                // open pop up window and get document for processing
                myWindow = window.open(l_url, l_name, l_params);
                $(myWindow).on('load', function() {
                    $('#tbody_result', myWindow.document).append(row_html);
                });
            }

问题 3 和 4 已解决：@MikeMcCaughan - 建议用这个代替：

myWindow.document.getElementById("tbody_result").append("<tr>" + row_html + "</tr>");

我应该使用：

$('#tbody_result', myWindow.document)

它奏效了。由于我在使用 jQuery，因此使用选择器是一个更好的解决方案。

【讨论】：