Question

这个问题已经问了很多遍了，但是在没有使用第三方应用程序的情况下从未真正回答过。

我在已经有2个静态行的表中动态创建了行。行创建良好并附加到:last，我可以获取/拉出/推入.val .text等...但是无法获取完整的html输出，如“查看页面”中所示大多数浏览器的来源”。

即使像document.getElementsByTagName('html')[0].innerHTML;这样的示例也不会检索动态创建的行。

即使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中。除了$('[name="item_desc[' + i + ']"]').val(...).html(...)之外，还设置HTML，例如.val()（等），这样您也可以在行的HTML中看到值。

查看有效的fiddle。

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>

获取动态创建的表行的HTML

4 个答案: