get HTML of dynamically created table rows

问题

This question has been asked numerous times but never really answered specifically without the use of a third party application.

I have dynamically created rows in a table that already has 2 static rows. The rows are created fine and appended to the :last and I can get/pull/push the .val .text ect... but cannot get the full html output as seen in 'view page source' of most browsers.

Even examples like: document.getElementsByTagName('html')[0].innerHTML; don't retrieve the dynamically created rows.

Only the static table will show even with console.log($(this).html()); in the .each

Would like the html returned to include the values from <textarea> and <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>

回答1:

It took for while to understand what you need. value of textarea is not reflected to its innerHTML. Set also HTML, like $('[name="item_desc[' + i + ']"]').val(...).html(...) (et al) additionally to .val(), that way you can see the values in HTML of the row too.

See a working fiddle.

回答2:

Have you tried this pure javascript code

document.getElementById("tableid").outerHTML;

回答3:

The main problem is use of console.log($(this).html());. The this inside loop is ajax result object.

I created a sample html. Please see complete code and points to be noted.

You uses console.log($(this).html()); inside loop but its wrong. Because this inside loop is the json object.
Why you using $('[name="item_desc['+i+']"]').val(invoices.description); Instead you can set it like <textarea form ="testinsert" name="item_desc[]">' + invoices.description + '</textarea>
Ajax is now loading inside document ready.
The console.log($('#items').html()); printed outside of loop.

Hope this will help.

    <!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>

回答4:

You can retrieve the whole HTML table source by simply calling:

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

I see that you have some code console.log($('.item-row').html()); but that has no point because that will output only first .item-row.

来源：https://stackoverflow.com/questions/55023299/get-html-of-dynamically-created-table-rows

标签

javascript

jquery