javascript - 使用 jQuery 动态添加行时如何将模式弹出文本编辑器设置为普通输入框

Question

我有动态数据表，它一切正常，但我面临一个小问题，即第一行正常工作并且稳定，第二行 < strong>“NARRATION” 列，只是问题所在。

这意味着第二行旁白列有输入弹出文本编辑器，这很好用，现在我点击ADD NEW 按钮，另一行会出现并点击旁白列再次显示弹出文本编辑器..我不想那样..

I want change the input modal text editor to normal input box. thats appear on dynamically added rows when i click add new button.

Want 1st two rows is should want popup text editor, and dynamic added rows only wants to be input boxes..

Full Code 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>

Full code FIDDLE

I dont know my question is understandable or not..

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");
})