как заменить пустые ячейки html таблиц данными Dynami c - PullRequest
Новая
       5

как заменить пустые ячейки html таблиц данными Dynami c

0 голосов
/ 24 апреля 2020

У меня есть таблица с идентификатором cartTable, которая генерирует строки таблицы динамически. Существует новый вариант использования, в котором у меня есть таблицы с пустыми ячейками, и я хотел бы изменить способ помещения данных в эти пустые ячейки с помощью метода DataTable row.add api и не могу выяснить, почему код не работает.

здесь приведен фрагмент предыдущего метода, добавляющий динамические строки c данные строки в пустое тело таблицы 

$.fn.renderTable = function(cartList) {
      $("#cartTable > tbody").empty();
      $(this).calculateCart();
      $.each(cartList, function(index, data) {
        $("#cartTable > tbody").append(
          $("<tr>").append(
            // $("<td>", { text: index + 1 }),
            $("<td>").append(
              $("<input>", {
                class: "form-control",
                type: "number",
                value: data.quantity,
                style: "width:65px;",
                onInput: "$(this).qtInput(" + index + ")"
              })
            ),
            $("<td>", {
              text: data.product_name
            }),
            $("<td>", {
              text: settings.symbol + data.price
            }),
            $("<td>", {
              text: settings.symbol + (data.price * data.quantity).toFixed(2)
            }),
            $("<td>").append(
              $("<button>", {
                class: "btn btn-danger btn-xs",
                onclick: "$(this).deleteFromCart(" + index + ")"
              }).append(
                $("<i>", {
                  class: "fa fa-times"
                })
              )
            )
          )
        );
      });
    };

Вот новая таблица с пустыми данными строки 

<table class="table table-striped table-bordered" id="cartTable" style="width: 100%">
<thead>
    <tr>
        <td>Qty</td>
        <td>Items</td>
        <td>Price</td>
        <td>Amount</td>
        <td>Remove</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
    </tr>
    <tr>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
    </tr>
    <tr>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
    </tr>
    <tr>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
    </tr>
    <tr>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
    </tr>
    <tr>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
    </tr>
    <tr>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
    </tr>
    <tr>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
    </tr>
    <tr>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
    </tr>
    <tr>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
    </tr>
    <tr>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
    </tr>
    <tr>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
    </tr>
    <tr>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
    </tr>
    <tr>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
        <td>&nsbp;</td>
    </tr>
</tbody>
</table>
...