獲取動態創建的表行的HTML

Question

這個問題已經被問過無數次，但是在沒有使用第三方應用程序的情況下從未真正回答過。

我在已經有2個靜態行的表中動態創建了行。 行創建良好，並附加到:last ，我可以獲取/拉出/推入.val .text ect ...，但無法像大多數瀏覽器的“查看頁面源代碼”所示獲得完整的html輸出。

甚至還包括以下示例： document.getElementsByTagName('html')[0].innerHTML; 不要檢索動態創建的行。

即使使用console.log($(this).html());也只會顯示靜態表console.log($(this).html()); 在.each

希望返回的html包含<textarea>和<span>

 $.ajax({                                      
        url: 'invoice_fill.php',                         
        data: {action: "invoice" },                                             
        dataType: 'json',                   
        success: function(data){
            var result = [];
            var invoices; 

            $.each(data, function(i, e) {

            invoices = this;
            $(".item-row:last").after(
              '<tr class="item-row">'+
              '<td class="description"><textarea form ="testinsert" name="item_desc['+i+']">Description</textarea></td>'+
              '<td><textarea class="cost" form ="testinsert" name="item_cost['+i+']">$0</textarea></td>'+
              '<td><textarea class="qty" form ="testinsert" name="item_qty['+i+']">0</textarea></td>'+
              '<td><span class="price" form ="testinsert" name="item_price['+i+']">$0</span></td></tr>');

            $('[name="item_desc['+i+']"]').val(invoices.description);
            $('[name="item_cost['+i+']"]').val(invoices.cost);
            $('[name="item_qty['+i+']"]').val(invoices.quantity);
            $('[name="item_price['+i+']"]').val(invoices.price);

            console.log($(this).html());
            console.log($('.item-row').html());

      });

        }
});

<table id="items">

      <tr>
          <th>Item</th>
          <th>Description</th>
          <th>Unit Cost</th>
          <th>Quantity</th>
          <th>Price</th>
      </tr>

      <tr class="item-row">
          <td class="item-name"><div class="delete-wpr"><textarea form ="testinsert" name="item_name[]">Hourly Rate</textarea>
          <a class="delete" href="javascript:;" title="Remove row">X</a>
          <a class="add-product" href="javascript:;" title="Add Product">A</a>
          </div></td>
          <td class="description"><textarea form ="testinsert" name="item_desc[]">Business Rate: Consulting/Labor/Installs</textarea></td>
          <td><textarea class="cost" form ="testinsert" name="item_cost[]">$150.00</textarea></td>
          <td><textarea class="qty" form ="testinsert" name="item_qty[]">1</textarea></td>
          <td><span class="price" form ="testinsert" name="item_price[]">$150.00</span></td>
      </tr>

      <tr class="item-row">
          <td class="item-name"><div class="delete-wpr"><textarea form ="testinsert" name="item_name[]">Hourly Rate</textarea>
          <a class="delete" href="javascript:;" title="Remove row">X</a>
          <a class="add-product" href="javascript:;" title="Add Product">A</a>
          </div></td>
          <td class="description"><textarea form ="testinsert" name="item_desc[]">Residential Rate: Consulting/Labor/Installs</textarea></td>
          <td><textarea class="cost" form ="testinsert" name="item_cost[]">$95.00</textarea></td>
          <td><textarea class="qty" form ="testinsert" name="item_qty[]">1</textarea></td>
          <td><span class="price" form ="testinsert" name="item_price[]">$95.00</span></td>
      </tr>

</table>

Answer 1

您可以通過簡單的調用來檢索整個HTML表源：

console.log( $("#items").html() );

我看到您有一些代碼console.log($('.item-row').html()); 但這沒有意義，因為那只會輸出第一個.item-row 。

Answer 2

您是否嘗試過這種純JavaScript代碼

document.getElementById("tableid").outerHTML;

Answer 3

花了一段時間了解您的需求。 value的textarea不被反射到它innerHTML 。 除了.val()之外，還設置HTML，例如$('[name="item_desc[' + i + ']"]').val(...).html(...) （ .val() ，您也可以在該行的HTML中查看值。

看到一個工作的小提琴 。

Answer 4

主要問題是使用console.log($(this).html()); 。 this內部循環是ajax結果對象。

我創建了一個示例html 。 請查看完整的代碼和要注意的要點。

• 您使用console.log($(this).html()); 內部循環，但它是錯誤的。 因為this內部循環是json對象。

• 為什么使用$('[name="item_desc['+i+']"]').val(invoices.description); 相反，您可以將其設置為<textarea form ="testinsert" name="item_desc[]">' + invoices.description + '</textarea>

• Ajax現在正在將文檔加載到內部。
• console.log($('#items').html()); 循環外打印。

希望這會有所幫助。

  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <table id="items"> <tr> <th>Item</th> <th>Description</th> <th>Unit Cost</th> <th>Quantity</th> <th>Price</th> </tr> <tr class="item-row"> <td class="item-name"> <div class="delete-wpr"><textarea form="testinsert" name="item_name[]">Hourly Rate</textarea> <a class="delete" href="javascript:;" title="Remove row">X</a> <a class="add-product" href="javascript:;" title="Add Product">A</a> </div> </td> <td class="description"><textarea form="testinsert" name="item_desc[]">Business Rate: Consulting/Labor/Installs</textarea></td> <td><textarea class="cost" form="testinsert" name="item_cost[]">$150.00</textarea></td> <td><textarea class="qty" form="testinsert" name="item_qty[]">1</textarea></td> <td><span class="price" form="testinsert" name="item_price[]">$150.00</span></td> </tr> <tr class="item-row"> <td class="item-name"> <div class="delete-wpr"><textarea form="testinsert" name="item_name[]">Hourly Rate</textarea> <a class="delete" href="javascript:;" title="Remove row">X</a> <a class="add-product" href="javascript:;" title="Add Product">A</a> </div> </td> <td class="description"><textarea form="testinsert" name="item_desc[]">Residential Rate: Consulting/Labor/Installs</textarea> </td> <td><textarea class="cost" form="testinsert" name="item_cost[]">$95.00</textarea></td> <td><textarea class="qty" form="testinsert" name="item_qty[]">1</textarea></td> <td><span class="price" form="testinsert" name="item_price[]">$95.00</span></td> </tr> </table> <script> $(document).ready(function () { $.ajax({ url: 'invoice_fill.php', data: {action: "invoice"}, dataType: 'json', success: function (data) { var result = []; var invoices; $.each(data, function (i, e) { invoices = this; $(".item-row:last").after( '<tr class="item-row">' + '<td class="description"><textarea form ="testinsert" name="item_desc[]">' + invoices.description + '</textarea></td>' + '<td><textarea class="cost" form ="testinsert" name="item_cost[]">' + invoices.cost + '</textarea></td>' + '<td><textarea class="qty" form ="testinsert" name="item_qty[]">' + invoices.quantity + '</textarea></td>' + '<td><span class="price" form ="testinsert" name="item_price[]">' + invoices.price + '</span></td></tr>'); }); //console.log($(this).html()); // console.log($('.item-row').html()); console.log($('#items').html()); } }); }); </script> </body> </html>