Как получить данные JSON в динамически добавляемых строках

Question

Как получить данные JSON в динамически добавляемых строках ..

С чем я сталкиваюсь, если нажмем кнопку добавления строки 4 раза, будут добавлены 4 строки, а когда я введу данные и нажмуКнопка отправки Я получаю только одну строку данных, я не могу получить динамически добавленные оставшиеся 3 строки данных ..

Мой код ошибки ниже,

FIDDLE ЗДЕСЬ

Я просто хочу динамически добавлять строки данных в формате json

$(document).ready(function() {
  $(".add_Row").click(function() {
    row = `<tr id="tasklist" class="jsrow"><td><input type="text" class='sno sel_text form-control' for="acctcode" name="acctcode" id="cashAcctcode" placeholder='A/c code'></input></td><td><select class="sel_sel form-control status" id="accountName" for="actname" name="accountName"><option value="null">Choose an items</option><option value="acc1">Account 1</option><option value='acc2'>Account 2</option><option value='acc3'>Account 3</option></select></td><td><input type="text" class='form-control pname' for='pay_narrat' name='pay_narrat' placeholder='Enter your text here' id='acc_narrat' data-toggle='modal' data-target='#accnarratModal'></input></td><td><input type="text" placeholder='Debit Amount' class='form-control task input-md' id='cashdeb' name='debit' for='debit' data-action='sumDebit'></input></td><td><input type="text" placeholder='Credit Amount' id="crditCash" name='credit' for='credit' data-action='sumCredit' class='form-control comment input-md' readonly></input></td><td><a class="dlt-icon"><button type="button" class="adRow" style="width:70%;">x</button></a></td></tr>`;
    $("table > tbody").append(row);
    var defVal = $("select[name=acctname]").find(":selected").val();
    if (defVal) {
      $("select[name=accountName]").find(`option[value=${defVal}]`).hide();
    }
    $(document).on('click', '.dlt-icon', function() {
      $(this).parents('tr.jsrow').first().remove();
    });
    bindScript();
  });
});

/* JSON */

(function($) {
  $.fn.serializeFormJSON = function() {

    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
      if (o[this.name]) {
        if (!o[this.name].push) {
          o[this.name] = [o[this.name]];
        }
        o[this.name].push(this.value || '');
      } else {
        o[this.name] = this.value || '';
      }
    });
    return o;
  };
})(jQuery);

$('form').submit(function(e) {
  e.preventDefault();
  var data = {
    "cashpayment": [{
        "narr": $('#pay_narrat').val(),
        "acctcode": $('#payacc_code').val(),
        "debit": $('#paydeb').val(),
        "actname": $('#payacc').val(),
        "credit": $('#paycredit').val()
      },
      {
        "narr": $('#acc_narrat').val(),
        "acctcode": $('#cashAcctcode').val(),
        "debit": $('#cashdeb').val(),
        "accountName": $('#accountName').val(),
        "credit": $('#crditCash').val()
      }
    ]
  };
  console.log(data);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" class="add_Row adRow" id="add_row" value="Add Row">
<div class="container">
  <div class="row clearfix">
    <div class="col-md-12 column">

      <table class="table table-bordered table-hover" id="tab_logic">
        <thead>
          <tr style="background-color: #680779; color: #fff;">
            <th class="text-center">
              Account Code
            </th>
            <th class="text-center">
              A/c Name*
            </th>
            <th class="text-center">
              Narration*
            </th>
            <th class="text-center">
              Debit*
            </th>
            <th class="text-center">
              Credit
            </th>
            <th class="text-center">
              Action
            </th>
          </tr>
        </thead>
        <tbody>
          <tr id="fst_row">
            <td>
              <input type="number" id="payacc_code" placeholder='Enter A/c code' for="acctcode" name="acctcode" class="form-control sel_text" />
            </td>
            <td>
              <select class="form-control sel_sel" id="payacc" name="actname" for="actname">
                <option value="">Select TDS A/c name</option>
                <option value="1">TDS A/c 1</option>
                <option value="2">TDS A/c 2</option>
                <option value="3">TDS A/c 3</option>
              </select>
            </td>
            <td>
              <input type="text" class="form-control" id="pay_narrat" name="narr" for="narr" placeholder="Enter your text here" data-toggle="modal" data-target="#narratModal" />
            </td>
            <td>
              <input type="number" id="paydeb" value="100" name="debit" for="debit" placeholder='Debit Amount' data-action="sumDebit" class="form-control" readonly />
            </td>
            <td>
              <input type="number" id="paycredit" name="credit" for="credit" placeholder='Credit Amount' data-action="sumCredit" class="form-control" readonly />
            </td>
          </tr>

          <tr id='addr1'></tr>
        </tbody>
      </table>

    </div>
  </div>
</div>

<!-- SUBMIT -->

<button type="submit" class="btn add-btn submit-btn load" id="cashSub">Submit</button>

Answer 1

Примечание: - Вам нужно удалить класс и добавить кнопку так же, как я добавил ... тогда вам нужно добавить tr к $("table > tbody").append(); заменить этот код на $('table tbody').append();

Вот рабочая Скрипка

$(document).ready(function() {
  $("#add_row").click(function() {
    $('table tbody').append(`<tr id="tasklist" class="jsrow"><td><input type="text" class='sno sel_text form-control' for="acctcode" name="acctcode" id="cashAcctcode" placeholder='A/c code'></input></td><td><select class="sel_sel form-control status" id="accountName" for="actname" name="accountName"><option value="null">Choose an items</option><option value="acc1">Account 1</option><option value='acc2'>Account 2</option><option value='acc3'>Account 3</option></select></td><td><input type="text" class='form-control pname' for='pay_narrat' name='pay_narrat' placeholder='Enter your text here' id='acc_narrat' data-toggle='modal' data-target='#accnarratModal'></input></td><td><input type="text" placeholder='Debit Amount' class='form-control task input-md' id='cashdeb' name='debit' for='debit' data-action='sumDebit'></input></td><td><input type="text" placeholder='Credit Amount' id="crditCash" name='credit' for='credit' data-action='sumCredit' class='form-control comment input-md' readonly></input></td><td><a class="dlt-icon"><button type="button" class="adRow" style="width:70%;">x</button></a></td></tr>`);
    var defVal = $("select[name=acctname]").find(":selected").val();

    if (defVal) {
      $("select[name=accountName]").find(`option[value=${defVal}]`).hide();
      $(document).on('click', '.dlt-icon', function() {
        $(this).parents('tr.jsrow').first().remove();
      });
      bindScript();
    }
  });
});

/* JSON */
$("#cashSub").click(function(){
$('table tbody').each(function() {
    console.log($(this).find("tr").html()) 
 });
});


(function($) {
  $.fn.serializeFormJSON = function() {

    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
      if (o[this.name]) {
        if (!o[this.name].push) {
          o[this.name] = [o[this.name]];
        }
        o[this.name].push(this.value || '');
      } else {
        o[this.name] = this.value || '';
      }
    });
    return o;
  };
})(jQuery);

$('form').submit(function(e) {
  e.preventDefault();
  var data = {
    "cashpayment": [{
        "narr": $('#pay_narrat').val(),
        "acctcode": $('#payacc_code').val(),
        "debit": $('#paydeb').val(),
        "actname": $('#payacc').val(),
        "credit": $('#paycredit').val()
      },
      {
        "narr": $('#acc_narrat').val(),
        "acctcode": $('#cashAcctcode').val(),
        "debit": $('#cashdeb').val(),
        "accountName": $('#accountName').val(),
        "credit": $('#crditCash').val()
      }
    ]
  };
  console.log(data);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add_row" class="">Add row</button>
<div class="container">
  <div class="row clearfix">
    <div class="col-md-12 column">
      <table class="table table-bordered table-hover" id="tab_logic">
        <thead>
          <tr style="background-color: #680779; color: #fff;">
            <th class="text-center">
              Account Code
            </th>
            <th class="text-center">
              A/c Name*
            </th>
            <th class="text-center">
              Narration*
            </th>
            <th class="text-center">
              Debit*
            </th>
            <th class="text-center">
              Credit
            </th>
            <th class="text-center">
              Action
            </th>
          </tr>
        </thead>
        <tbody>
          <tr id="fst_row">
            <td>
              <input type="number" id="payacc_code" placeholder='Enter A/c code' for="acctcode" name="acctcode" class="form-control sel_text" />
            </td>
            <td>
              <select class="form-control sel_sel" id="payacc" name="actname" for="actname">
                <option value="">Select TDS A/c name</option>
                <option value="1">TDS A/c 1</option>
                <option value="2">TDS A/c 2</option>
                <option value="3">TDS A/c 3</option>
              </select>
            </td>
            <td>
              <input type="text" class="form-control" id="pay_narrat" name="narr" for="narr" placeholder="Enter your text here" data-toggle="modal" data-target="#narratModal" />
            </td>
            <td>
              <input type="number" id="paydeb" value="100" name="debit" for="debit" placeholder='Debit Amount' data-action="sumDebit" class="form-control" readonly />
            </td>
            <td>
              <input type="number" id="paycredit" name="credit" for="credit" placeholder='Credit Amount' data-action="sumCredit" class="form-control" readonly />
            </td>
          </tr>

          <tr id='addr1'></tr>
        </tbody>
      </table>

    </div>
  </div>
</div>

<!-- SUBMIT -->

<button type="submit" class="btn add-btn submit-btn load" id="cashSub">Submit</button>