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

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

У меня есть таблица динамических данных, все работает отлично, но я сталкиваюсь с небольшой проблемой: первая строка работает правильно, она стабильна, а вторая колонка «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")) {amp}gt; newid) { newid = parseInt($(this).data("id")); } }); newid  ; var tr = $("{amp}lt;tr{amp}gt;{amp}lt;/tr{amp}gt;", { 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 = $("{amp}lt;td{amp}gt;{amp}lt;/td{amp}gt;", { "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 = $("{amp}lt;td{amp}gt;{amp}lt;/td{amp}gt;", { '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); }) 
 {amp}lt;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"{amp}gt; {amp}lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;!-- table --{amp}gt; {amp}lt;a id="add_row" class="btn btn-primary float-right adRow"{amp}gt;Add New{amp}lt;/a{amp}gt; {amp}lt;div class="col-md-12 table-responsive"{amp}gt; {amp}lt;table class="table table-bordered table-hover table-sortable" id="tab_logic"{amp}gt; {amp}lt;thead style="background-color: #680779; color: #fff;"{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th class="text-center"{amp}gt; Account Code {amp}lt;/th{amp}gt; {amp}lt;th class="text-center"{amp}gt; A/c Name* {amp}lt;/th{amp}gt; {amp}lt;th class="text-center"{amp}gt; Narration* {amp}lt;/th{amp}gt; {amp}lt;th class="text-center"{amp}gt; Debit* {amp}lt;/th{amp}gt; {amp}lt;th class="text-center"{amp}gt; Credit {amp}lt;/th{amp}gt; {amp}lt;th class="text-center" style="border-top: 1px solid #ffffff; border-right: 1px solid #ffffff;"{amp}gt; Action {amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/thead{amp}gt; {amp}lt;tbody{amp}gt; {amp}lt;tr id="fst_row"{amp}gt; {amp}lt;td{amp}gt; {amp}lt;input type="number" id="payacc_code" placeholder='Enter A/c code' class="form-control" /{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt; {amp}lt;select class="form-control" id="payacc"{amp}gt; {amp}lt;option value=""{amp}gt;Select TDS A/c name{amp}lt;/option{amp}gt; {amp}lt;option value="1"{amp}gt;JOE{amp}lt;/option{amp}gt; {amp}lt;option value="2"{amp}gt;JOE 2{amp}lt;/option{amp}gt; {amp}lt;option value="3"{amp}gt;JOE 3{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt; {amp}lt;input type="text" class="form-control" id="pay_narrat" placeholder="Enter your here" data-toggle="modal" data-target="#narratModal" /{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt; {amp}lt;input type="number" id="paydeb" value="100" placeholder='Debit Amount' data-action="sumDebit" class="form-control" readonly /{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt; {amp}lt;input type="number" id="paycredit" placeholder='Credit Amount' class="form-control" readonly /{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt; {amp}lt;button class='btn btn-danger glyphicon glyphicon-remove row-remove removeBtn' style="cursor: not-allowed" disabled{amp}gt;{amp}lt;span aria-hidden="true"{amp}gt;×{amp}lt;/span{amp}gt;{amp}lt;/button{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr id='addr0' class="hidden"{amp}gt; {amp}lt;td data-name="cashCode"{amp}gt; {amp}lt;input type="text" id="cashacc_code" name='cashacc_code' placeholder='Enter A/c Code' class="form-control" /{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;td data-name="sel"{amp}gt; {amp}lt;select class="form-control" name="cashacc_sel" id="cashacc_sel"{amp}gt; {amp}lt;option value=""{amp}gt;Select A/c name{amp}lt;/option{amp}gt; {amp}lt;option value="1"{amp}gt;Plumz{amp}lt;/option{amp}gt; {amp}lt;option value="2"{amp}gt;Plumz 2{amp}lt;/option{amp}gt; {amp}lt;option value="3"{amp}gt;Plumz 3{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;td data-name="narrate"{amp}gt; {amp}lt;input type="text" class="form-control" id="acc_narrat" placeholder="Enter your here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" /{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;td data-name="dbt"{amp}gt; {amp}lt;input type="number" id="cashdeb" name='cashdeb' placeholder='Debit Amount' data-action="sumDebit" class="form-control" /{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;td data-name="crdit"{amp}gt; {amp}lt;input type="number" id="cashcredit" name='cashcredit' placeholder='Credit Amount' class="form-control" readonly /{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;td data-name="del"{amp}gt; {amp}lt;button name="del0" class='btn btn-danger glyphicon glyphicon-remove row-remove removeBtn'{amp}gt;{amp}lt;span aria-hidden="true"{amp}gt;×{amp}lt;/span{amp}gt;{amp}lt;/button{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/tbody{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;!-- narration text popup modal --{amp}gt; {amp}lt;div class="modal fade" id="narratModal" tabindex="-1" role="dialog" aria-labelledby="narratModalLabel" aria-hidden="true"{amp}gt; {amp}lt;div class="modal-dialog"{amp}gt; {amp}lt;div class="modal-content"{amp}gt; {amp}lt;div class="modal-header"{amp}gt; {amp}lt;button type="button" class="close cash-dismiss" data-dismiss="modal" aria-label="Close"{amp}gt;{amp}lt;span aria-hidden="true"{amp}gt;{amp}amp;times;{amp}lt;/span{amp}gt;{amp}lt;/button{amp}gt; {amp}lt;h4 class="modal-title modal_head" id="narratModalLabel"{amp}gt;Narration{amp}lt;/h4{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="modal-body"{amp}gt; {amp}lt;label class="modal_note"{amp}gt;Note: Only alphabets AZ az number 0-9 and characters % {amp}amp; [] () - _ . , are allowed in text{amp}lt;/label{amp}gt; {amp}lt;input class="myInput form-control form-control-sm" style="height: 7em;" placeholder="Enter Here" /{amp}gt; {amp}lt;span class="modal_valid"{amp}gt;0/200 Characterts entered{amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="modal-footer narr_footer"{amp}gt; {amp}lt;button type="button" class="btn btn-primary cashmodal_btn" id="narrat_ok" data-dismiss="modal"{amp}gt;OK{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="modal fade" id="accnarratModal" tabindex="-1" role="dialog" aria-labelledby="accnarratModalLabel" aria-hidden="true"{amp}gt; {amp}lt;div class="modal-dialog"{amp}gt; {amp}lt;div class="modal-content"{amp}gt; {amp}lt;div class="modal-header"{amp}gt; {amp}lt;button type="button" class="close cash-dismiss" data-dismiss="modal" aria-label="Close"{amp}gt;{amp}lt;span aria-hidden="true"{amp}gt;{amp}amp;times;{amp}lt;/span{amp}gt;{amp}lt;/button{amp}gt; {amp}lt;h4 class="modal-title modal_head" id="accnarratModalLabel"{amp}gt;Narration{amp}lt;/h4{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="modal-body"{amp}gt; {amp}lt;label class="modal_note"{amp}gt;Note: Only alphabets AZ az number 0-9 and characters % {amp}amp; [] () - _ . , are allowed in text{amp}lt;/label{amp}gt; {amp}lt;textarea class="acnarrate form-control form-control-sm" style="height: 7em;" placeholder="Enter Here"{amp}gt;{amp}lt;/textarea{amp}gt; {amp}lt;span class="modal_valid"{amp}gt;0/200 Characterts entered{amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="modal-footer narr_footer"{amp}gt; {amp}lt;button type="button" class="btn btn-primary cashmodal_btn" id="accnarrat_ok" data-dismiss="modal"{amp}gt;OK{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

Полный код FIDDLE

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

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector