jQuery得到添加行到window.open

我試圖創建一個剪貼板框，在那裏我可以從父頁面/窗口上的表中複製一些列到彈出窗口。jQuery得到添加行到window.open

父窗口元素：

表每行的複選框（選擇）
按鈕行復制到另一個窗口表

彈出窗口元素：

表其中沒有排（僅限tbody）

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

FILE 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格式，但文本（圖片下面）

來源

2017-05-08 jck

爲什麼你不使用模態對話框，爲什麼彈出窗口？ – skobaljic

@skobaljic它可能需要另一個頁面，以便可以關閉父窗口或從搜索中更改父頁表的內容。這個新窗口將包含他們需要複製的所有項目以加快處理速度。 – jck

您追加的每一行都應該包含在''中，而不是**表中的所有** html。 – skobaljic

我回答我的問題，我發現了一些變通，以我的問題列舉的其他問題，因爲沒有一個張貼的答案。

問題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中工作，這是使用選擇器的更好的解決方案。

來源

2017-05-09 09:57:22 jck

jQuery得到添加行到window.open

回答

相關問題