Как установить для модального всплывающего текстового редактора обычное поле ввода при динамическом добавлении строк с помощью jQuery

Question

У меня есть динамическая таблица данных, все работает отлично, но я сталкиваюсь с небольшой проблемой: Первая строка работает нормально и стабильно, Вторая строка «NARRATION» столбец, это только проблема.

Это означает, что второй столбец повествования имеет всплывающий текстовый редактор ввода, это нормально работает, теперь я нажимаю ADD NEW кнопку другой рядприедет и щелкнет колонку повествования. Снова откройте всплывающий текстовый редактор. Мне это не нужно.

Я хочу изменить модальный текстовый редактор ввода на обычное поле ввода. это появляется в динамически добавляемых строках, когда я нажимаю кнопку «Добавить новую».

Требуется, чтобы первые две строки нуждались в всплывающем текстовом редакторе, а динамически добавленные строки должны быть только полями ввода.

Полный код FIDDLE

/* TABLE JS */

$(document).ready(function() {
  $("#add_row").on("click", function() {
    // Dynamic Rows Code

    // Get max row id and set new id
    var newid = 0;
    $.each($("#tab_logic tr"), function() {
      if (parseInt($(this).data("id")) > newid) {
        newid = parseInt($(this).data("id"));
      }
    });
    newid++;

    var tr = $("<tr></tr>", {
      id: "addr" + newid,
      "data-id": newid
    });

    // loop through each td and create new elements with name of newid
    $.each($("#tab_logic tbody tr:nth(1) td"), function() {
      var td;
      var cur_td = $(this);

      var children = cur_td.children();

      // add new td and element if it has a nane
      if ($(this).data("name") !== undefined) {
        td = $("<td></td>", {
          "data-name": $(cur_td).data("name")
        });

        var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
        c.attr("name", $(cur_td).data("name") + newid);
        c.appendTo($(td));
        td.appendTo($(tr));
      } else {
        td = $("<td></td>", {
          'text': $('#tab_logic tr').length
        }).appendTo($(tr));
      }
    });

    // add the new row
    $(tr).appendTo($('#tab_logic'));

    $(tr).find("td button.row-remove").on("click", function() {
      $(this).closest("tr").remove();
    });
  });

  // Sortable Code
  var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();

    $helper.children().each(function(index) {
      $(this).width($originals.eq(index).width())
    });

    return $helper;
  };

  $(".table-sortable tbody").sortable({
    helper: fixHelperModified
  }).disableSelection();
  $(".table-sortable thead").disableSelection();
  $("#add_row").trigger("click");
});

/* POPUP JS */
$('.cashmodal_btn').on('click', function() {
  let val = $('.myInput').val();
  $('#pay_narrat').val(val);
});

$('.cashmodal_btn').on('click', function() {
  let val = $('.acnarrate').val();
  $('#acc_narrat').val(val);
})

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>


<!-- table -->

<a id="add_row" class="btn btn-primary float-right adRow">Add New</a>
<div class="col-md-12 table-responsive">
  <table class="table table-bordered table-hover table-sortable" id="tab_logic">
    <thead style="background-color: #680779;
                                                        color: #fff;">
      <tr>
        <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" style="border-top: 1px solid #ffffff; border-right: 1px solid #ffffff;">
          Action
        </th>
      </tr>
    </thead>
    <tbody>
      <tr id="fst_row">
        <td>
          <input type="number" id="payacc_code" placeholder='Enter A/c code' class="form-control" />
        </td>
        <td>
          <select class="form-control" id="payacc">
            <option value="">Select TDS A/c name</option>
            <option value="1">JOE</option>
            <option value="2">JOE 2</option>
            <option value="3">JOE 3</option>
          </select>
        </td>
        <td>
          <input type="text" class="form-control" id="pay_narrat" placeholder="Enter your here" data-toggle="modal" data-target="#narratModal" />
        </td>
        <td>
          <input type="number" id="paydeb" value="100" placeholder='Debit Amount' data-action="sumDebit" class="form-control" readonly />
        </td>
        <td>
          <input type="number" id="paycredit" placeholder='Credit Amount' class="form-control" readonly />
        </td>

        <td>
          <button class='btn btn-danger glyphicon glyphicon-remove row-remove removeBtn' style="cursor: not-allowed" disabled><span aria-hidden="true">×</span></button>
        </td>
      </tr>
      <tr id='addr0' class="hidden">
        <td data-name="cashCode">
          <input type="text" id="cashacc_code" name='cashacc_code' placeholder='Enter A/c Code' class="form-control" />
        </td>
        <td data-name="sel">
          <select class="form-control" name="cashacc_sel" id="cashacc_sel">
            <option value="">Select A/c name</option>
            <option value="1">Plumz</option>
            <option value="2">Plumz 2</option>
            <option value="3">Plumz 3</option>
          </select>
        </td>
        <td data-name="narrate">
          <input type="text" class="form-control" id="acc_narrat" placeholder="Enter your here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
        </td>
        <td data-name="dbt">
          <input type="number" id="cashdeb" name='cashdeb' placeholder='Debit Amount' data-action="sumDebit" class="form-control" />
        </td>
        <td data-name="crdit">
          <input type="number" id="cashcredit" name='cashcredit' placeholder='Credit Amount' class="form-control" readonly />
        </td>

        <td data-name="del">
          <button name="del0" class='btn btn-danger glyphicon glyphicon-remove row-remove removeBtn'><span aria-hidden="true">×</span></button>
        </td>
      </tr>
    </tbody>
  </table>
</div>


<!-- narration text popup modal -->

<div class="modal fade" id="narratModal" tabindex="-1" role="dialog" aria-labelledby="narratModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close cash-dismiss" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title modal_head" id="narratModalLabel">Narration</h4>
      </div>
      <div class="modal-body">
        <label class="modal_note">Note: Only alphabets A-Z a-z number 0-9 and characters % & [] () - _ . , are allowed in text</label>
        <input class="myInput form-control form-control-sm" style="height: 7em;" placeholder="Enter Here" />
        <span class="modal_valid">0/200 Characterts entered</span>
      </div>
      <div class="modal-footer narr_footer">
        <button type="button" class="btn btn-primary cashmodal_btn" id="narrat_ok" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="accnarratModal" tabindex="-1" role="dialog" aria-labelledby="accnarratModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close cash-dismiss" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title modal_head" id="accnarratModalLabel">Narration</h4>
      </div>
      <div class="modal-body">
        <label class="modal_note">Note: Only alphabets A-Z a-z number 0-9 and characters % & [] () - _ . , are allowed in text</label>

        <textarea class="acnarrate form-control form-control-sm" style="height: 7em;" placeholder="Enter Here"></textarea>
        <span class="modal_valid">0/200 Characterts entered</span>
      </div>
      <div class="modal-footer narr_footer">
        <button type="button" class="btn btn-primary cashmodal_btn" id="accnarrat_ok" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>

Полный код FIDDLE

Я не знаю, мой вопрос понятен илине ..

Answer 1

У меня проблема с проверкой, проверьте этот код

Обновите JS:

/* TABLE JS */

$(document).ready(function() {
  $("#add_row").on("click", function() {
    // Dynamic Rows Code

    // Get max row id and set new id
    var newid = 0;
    $.each($("#tab_logic tr"), function() {
      if (parseInt($(this).data("id")) > newid) {
        newid = parseInt($(this).data("id"));
      }
    });
    newid++;

    var tr = $("<tr></tr>", {
      id: "addr" + newid,
      "data-id": newid
    });

    // loop through each td and create new elements with name of newid
    $.each($("#tab_logic tbody tr:nth(1) td"), function() {
      var td;
      var cur_td = $(this);

      var children = cur_td.children();

      // add new td and element if it has a nane
      if ($(this).data("name") !== undefined) {
        td = $("<td></td>", {
          "data-name": $(cur_td).data("name")
        });

        var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
        c.attr("name", $(cur_td).data("name") + newid);
        c.appendTo($(td));
        td.appendTo($(tr));
      } else {
        td = $("<td></td>", {
          'text': $('#tab_logic tr').length
        }).appendTo($(tr));
      }
    });

    // add the new row
    $(tr).appendTo($('#tab_logic'));

    $(tr).find("td button.row-remove").on("click", function() {
      $(this).closest("tr").remove();
    });
  });

  // Sortable Code
  var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();

    $helper.children().each(function(index) {
      $(this).width($originals.eq(index).width())
    });

    return $helper;
  };

  $(".table-sortable tbody").sortable({
    helper: fixHelperModified
  }).disableSelection();
  $(".table-sortable thead").disableSelection();
  $("#add_row").trigger("click");
});

/* POPUP JS */
$('.cashmodal_btn').on('click', function() {
  let val = $('.myInput').val();
  $('#pay_narrat').val(val);
});

$('.cashmodal_btn').on('click', function() {
  let val = $('.acnarrate').val();
  $(".acnarrate").val("");
  $('.active').val(val);
  $(".active").removeClass("active");
})

$(document).on('click',"input#acc_narrat", function() {
  $(".active").removeClass("active");
  $(".acnarrate").val( $(this).val() );
  $(this).addClass("active");
})

Answer 2

Удалите attribute data-toggle из TD перед добавлением к $('#tab_logic')

/* TABLE JS */

$(document).ready(function() {
  $("#add_row").on("click", function() {
    // Dynamic Rows Code

    // Get max row id and set new id
    var newid = 0;
    $.each($("#tab_logic tr"), function() {
      if (parseInt($(this).data("id")) > newid) {
        newid = parseInt($(this).data("id"));
      }
    });
    newid++;

    var tr = $("<tr></tr>", {
      id: "addr" + newid,
      "data-id": newid
    });

    // loop through each td and create new elements with name of newid
    $.each($("#tab_logic tbody tr:nth(1) td"), function() {
      var td;
      var cur_td = $(this);

      var children = cur_td.children();

      // add new td and element if it has a nane
      if ($(this).data("name") !== undefined) {
        td = $("<td></td>", {
          "data-name": $(cur_td).data("name")
        });

        var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
        c.attr("name", $(cur_td).data("name") + newid);
        c.appendTo($(td));
        td.appendTo($(tr));
      } else {
        td = $("<td></td>", {
          'text': $('#tab_logic tr').length
        }).appendTo($(tr));
      }
    });
    
    $(tr).find('#acc_narrat').removeAttr('data-toggle');

    // add the new row
    $(tr).appendTo($('#tab_logic'));

    $(tr).find("td button.row-remove").on("click", function() {
      $(this).closest("tr").remove();
    });
  });

  // Sortable Code
  var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();

    $helper.children().each(function(index) {
      $(this).width($originals.eq(index).width())
    });

    return $helper;
  };

  $(".table-sortable tbody").sortable({
    helper: fixHelperModified
  }).disableSelection();
  $(".table-sortable thead").disableSelection();
  $("#add_row").trigger("click");
});

/* POPUP JS */
$('.cashmodal_btn').on('click', function() {
  let val = $('.myInput').val();
  $('#pay_narrat').val(val);
});

$('.cashmodal_btn').on('click', function() {
  let val = $('.acnarrate').val();
  $('#acc_narrat').val(val);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>


<!-- table -->

<a id="add_row" class="btn btn-primary float-right adRow">Add New</a>
<div class="col-md-12 table-responsive">
  <table class="table table-bordered table-hover table-sortable" id="tab_logic">
    <thead style="background-color: #680779;
                                                        color: #fff;">
      <tr>
        <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" style="border-top: 1px solid #ffffff; border-right: 1px solid #ffffff;">
          Action
        </th>
      </tr>
    </thead>
    <tbody>
      <tr id="fst_row">
        <td>
          <input type="number" id="payacc_code" placeholder='Enter A/c code' class="form-control" />
        </td>
        <td>
          <select class="form-control" id="payacc">
            <option value="">Select TDS A/c name</option>
            <option value="1">JOE</option>
            <option value="2">JOE 2</option>
            <option value="3">JOE 3</option>
          </select>
        </td>
        <td>
          <input type="text" class="form-control" id="pay_narrat" placeholder="Enter your here" data-toggle="modal" data-target="#narratModal" />
        </td>
        <td>
          <input type="number" id="paydeb" value="100" placeholder='Debit Amount' data-action="sumDebit" class="form-control" readonly />
        </td>
        <td>
          <input type="number" id="paycredit" placeholder='Credit Amount' class="form-control" readonly />
        </td>

        <td>
          <button class='btn btn-danger glyphicon glyphicon-remove row-remove removeBtn' style="cursor: not-allowed" disabled><span aria-hidden="true">×</span></button>
        </td>
      </tr>
      <tr id='addr0' class="hidden">
        <td data-name="cashCode">
          <input type="text" id="cashacc_code" name='cashacc_code' placeholder='Enter A/c Code' class="form-control" />
        </td>
        <td data-name="sel">
          <select class="form-control" name="cashacc_sel" id="cashacc_sel">
            <option value="">Select A/c name</option>
            <option value="1">Plumz</option>
            <option value="2">Plumz 2</option>
            <option value="3">Plumz 3</option>
          </select>
        </td>
        <td data-name="narrate">
          <input type="text" class="form-control" id="acc_narrat" placeholder="Enter your here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
        </td>
        <td data-name="dbt">
          <input type="number" id="cashdeb" name='cashdeb' placeholder='Debit Amount' data-action="sumDebit" class="form-control" />
        </td>
        <td data-name="crdit">
          <input type="number" id="cashcredit" name='cashcredit' placeholder='Credit Amount' class="form-control" readonly />
        </td>

        <td data-name="del">
          <button name="del0" class='btn btn-danger glyphicon glyphicon-remove row-remove removeBtn'><span aria-hidden="true">×</span></button>
        </td>
      </tr>
    </tbody>
  </table>
</div>


<!-- narration text popup modal -->

<div class="modal fade" id="narratModal" tabindex="-1" role="dialog" aria-labelledby="narratModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close cash-dismiss" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title modal_head" id="narratModalLabel">Narration</h4>
      </div>
      <div class="modal-body">
        <label class="modal_note">Note: Only alphabets A-Z a-z number 0-9 and characters % & [] () - _ . , are allowed in text</label>
        <input class="myInput form-control form-control-sm" style="height: 7em;" placeholder="Enter Here" />
        <span class="modal_valid">0/200 Characterts entered</span>
      </div>
      <div class="modal-footer narr_footer">
        <button type="button" class="btn btn-primary cashmodal_btn" id="narrat_ok" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="accnarratModal" tabindex="-1" role="dialog" aria-labelledby="accnarratModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close cash-dismiss" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title modal_head" id="accnarratModalLabel">Narration</h4>
      </div>
      <div class="modal-body">
        <label class="modal_note">Note: Only alphabets A-Z a-z number 0-9 and characters % & [] () - _ . , are allowed in text</label>

        <textarea class="acnarrate form-control form-control-sm" style="height: 7em;" placeholder="Enter Here"></textarea>
        <span class="modal_valid">0/200 Characterts entered</span>
      </div>
      <div class="modal-footer narr_footer">
        <button type="button" class="btn btn-primary cashmodal_btn" id="accnarrat_ok" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>

Answer 3

Вам просто нужно правильно клонировать свои td s и удалить свойство data-target из поля input.

Вот обновление, которое я сделал для вашего цикла элементов.

// loop through each td and create new elements with name of newid
$.each($("#tab_logic tbody tr:nth(1) td"), function() {
  var td;
  var cur_td = $(this).clone();  // <-- clone the td

  var children = cur_td.children();
  $(cur_td).find('#acc_narrat').removeAttr('data-toggle'); // <--- remove the attribute

  // add new td and element if it has a nane
  if ($(this).data("name") !== undefined) {
    td = $("<td></td>", {
      "data-name": $(cur_td).data("name")
    });

    var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
    c.attr("name", $(cur_td).data("name") + newid);
    c.appendTo($(td));
    td.appendTo($(tr));
  } else {
    td = $("<td></td>", {
      'text': $('#tab_logic tr').length
    }).appendTo($(tr));
  }
});

Короче говоря, вам нужно клонировать var cur_td = $(this).clone(); столбцы, чтобы потерять ссылку на существующий элемент. И уберите отношение к модалу из элемента. $(cur_td).find('#acc_narrat').removeAttr('data-toggle');

Я обновил вашу скрипку здесь.

Answer 4

Привет, я понимаю вашу проблему. Я обновил вашу скрипку.

вам просто нужно удалить свойство data-toggle & data-target из вновь созданной строки. потому что вы клонируете, поэтому клонируются все функции с элементами.

$("#"+trId +" #acc_narrat").removeAttr("data-target")
$("#"+trId +" #acc_narrat").removeAttr("data-toggle")

Здесь работает пример

Answer 5

Вы клонируете строку и меняете идентификаторы, но вам нужно удалить data-target="#narratModal" из поля ввода, чтобы модальное отображение не отображалось. Просто найдите поле ввода и удалите атрибут data-target="#narratModal", см. Ниже код

/* TABLE JS */

$(document).ready(function() {
  $("#add_row").on("click", function() {
    // Dynamic Rows Code

    // Get max row id and set new id
    var newid = 0;
    $.each($("#tab_logic tr"), function() {
      if (parseInt($(this).data("id")) > newid) {
        newid = parseInt($(this).data("id"));
      }
    });
    newid++;

    var tr = $("<tr></tr>", {
      id: "addr" + newid,
      "data-id": newid
    });

    // loop through each td and create new elements with name of newid
    $.each($("#tab_logic tbody tr:nth(1) td"), function() {
      var td;
      var cur_td = $(this);

      var children = cur_td.children();

      // add new td and element if it has a nane
      if ($(this).data("name") !== undefined) {
        td = $("<td></td>", {
          "data-name": $(cur_td).data("name")
        });

        var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
        c.attr("name", $(cur_td).data("name") + newid);
        c.appendTo($(td));
        td.appendTo($(tr));
      } else {
        td = $("<td></td>", {
          'text': $('#tab_logic tr').length
        }).appendTo($(tr));
      }
    });

    // add the new row
    $(tr).appendTo($('#tab_logic'));

    $(tr).find("td button.row-remove").on("click", function() {
      $(this).closest("tr").remove();
    });
    // remove data-target so that popup will not be shown
     $(tr).find('input[name^=narrat]').removeAttr('data-target');
  });

  // Sortable Code
  var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();

    $helper.children().each(function(index) {
      $(this).width($originals.eq(index).width())
    });

    return $helper;
  };

  $(".table-sortable tbody").sortable({
    helper: fixHelperModified
  }).disableSelection();
  $(".table-sortable thead").disableSelection();
  $("#add_row").trigger("click");
});

/* POPUP JS */
$('.cashmodal_btn').on('click', function() {
  let val = $('.myInput').val();
  $('#pay_narrat').val(val);
});

$('.cashmodal_btn').on('click', function() {
  let val = $('.acnarrate').val();
  $('#acc_narrat').val(val);
})

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>


<!-- table -->

<a id="add_row" class="btn btn-primary float-right adRow">Add New</a>
<div class="col-md-12 table-responsive">
  <table class="table table-bordered table-hover table-sortable" id="tab_logic">
    <thead style="background-color: #680779;
                                                        color: #fff;">
      <tr>
        <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" style="border-top: 1px solid #ffffff; border-right: 1px solid #ffffff;">
          Action
        </th>
      </tr>
    </thead>
    <tbody>
      <tr id="fst_row">
        <td>
          <input type="number" id="payacc_code" placeholder='Enter A/c code' class="form-control" />
        </td>
        <td>
          <select class="form-control" id="payacc">
            <option value="">Select TDS A/c name</option>
            <option value="1">JOE</option>
            <option value="2">JOE 2</option>
            <option value="3">JOE 3</option>
          </select>
        </td>
        <td>
          <input type="text" class="form-control" id="pay_narrat" placeholder="Enter your here" data-toggle="modal" data-target="#narratModal" />
        </td>
        <td>
          <input type="number" id="paydeb" value="100" placeholder='Debit Amount' data-action="sumDebit" class="form-control" readonly />
        </td>
        <td>
          <input type="number" id="paycredit" placeholder='Credit Amount' class="form-control" readonly />
        </td>

        <td>
          <button class='btn btn-danger glyphicon glyphicon-remove row-remove removeBtn' style="cursor: not-allowed" disabled><span aria-hidden="true">×</span></button>
        </td>
      </tr>
      <tr id='addr0' class="hidden">
        <td data-name="cashCode">
          <input type="text" id="cashacc_code" name='cashacc_code' placeholder='Enter A/c Code' class="form-control" />
        </td>
        <td data-name="sel">
          <select class="form-control" name="cashacc_sel" id="cashacc_sel">
            <option value="">Select A/c name</option>
            <option value="1">Plumz</option>
            <option value="2">Plumz 2</option>
            <option value="3">Plumz 3</option>
          </select>
        </td>
        <td data-name="narrate">
          <input type="text" class="form-control" id="acc_narrat" placeholder="Enter your here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
        </td>
        <td data-name="dbt">
          <input type="number" id="cashdeb" name='cashdeb' placeholder='Debit Amount' data-action="sumDebit" class="form-control" />
        </td>
        <td data-name="crdit">
          <input type="number" id="cashcredit" name='cashcredit' placeholder='Credit Amount' class="form-control" readonly />
        </td>

        <td data-name="del">
          <button name="del0" class='btn btn-danger glyphicon glyphicon-remove row-remove removeBtn'><span aria-hidden="true">×</span></button>
        </td>
      </tr>
    </tbody>
  </table>
</div>


<!-- narration text popup modal -->

<div class="modal fade" id="narratModal" tabindex="-1" role="dialog" aria-labelledby="narratModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close cash-dismiss" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title modal_head" id="narratModalLabel">Narration</h4>
      </div>
      <div class="modal-body">
        <label class="modal_note">Note: Only alphabets A-Z a-z number 0-9 and characters % & [] () - _ . , are allowed in text</label>
        <input class="myInput form-control form-control-sm" style="height: 7em;" placeholder="Enter Here" />
        <span class="modal_valid">0/200 Characterts entered</span>
      </div>
      <div class="modal-footer narr_footer">
        <button type="button" class="btn btn-primary cashmodal_btn" id="narrat_ok" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="accnarratModal" tabindex="-1" role="dialog" aria-labelledby="accnarratModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close cash-dismiss" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title modal_head" id="accnarratModalLabel">Narration</h4>
      </div>
      <div class="modal-body">
        <label class="modal_note">Note: Only alphabets A-Z a-z number 0-9 and characters % & [] () - _ . , are allowed in text</label>

        <textarea class="acnarrate form-control form-control-sm" style="height: 7em;" placeholder="Enter Here"></textarea>
        <span class="modal_valid">0/200 Characterts entered</span>
      </div>
      <div class="modal-footer narr_footer">
        <button type="button" class="btn btn-primary cashmodal_btn" id="accnarrat_ok" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>