使用 jQuery 動態添加行時如何將模式彈出文本編輯器設置為普通輸入框

Question

我有動態數據表，它一切正常，但我面臨一個小問題，即第一行工作正常且穩定，第二行“NARRATION”列只是問題所在。

這意味着第二行旁白列具有輸入彈出文本編輯器，這很好，現在我點擊添加新按鈕另一行將出現並單擊旁白列，它再次顯示彈出文本編輯器..我不想那樣..

我想將輸入模式文本編輯器更改為普通輸入框。 當我單擊添加新按鈕時，這會出現在動態添加的行上。

想要第一兩行應該想要彈出文本編輯器，而動態添加的行只想成為輸入框..

完整代碼 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 AZ az 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 AZ az 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

您正在克隆行並更改 ID，但您需要從輸入框中刪除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 AZ az 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 AZ az 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並從input字段中刪除data-target屬性。

這是我對您的元素循環所做的更新。

// 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屬性。 因為您正在克隆，所以每個帶有元素的 function 都在克隆。

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

這是工作示例

Answer 5

在附加到$('#tab_logic')之前從TD中刪除attribute data-toggle

 /* 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 AZ az 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 AZ az 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>