Как создать динамическую таблицу с полями ввода, вставить строку и удалить строку?

Как создать динамическую таблицу с полями ввода, вставить строку и удалить строку?

Мне нужно создать таблицу, в которую я могу добавлять и удалять строки, строки должны иметь поля ввода.

Что я пытаюсь сделать, это: чудо

И что у меня есть это: реальность

Вверху это моя Datatable, а внизу таблица, которую мне нужно создать, она должна иметь несколько полей ввода и кнопку, которая может удалить строку, я пробовал так много методов, но ни один из них не кажется на работу, можете ли вы дать мне подсказку, как это сделать правильно?

вот мой HTML:

 {amp}lt;div class="modal-body"{amp}gt; {amp}lt;h5 class="modal-title text-center"{amp}gt;Lançamento Original{amp}lt;/h5{amp}gt; {amp}lt;table id="table_cut_release" class="display table table-striped table-hover" style="overflow-x:auto; width: 100%; height: 100%;"{amp}gt; {amp}lt;thead{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th{amp}gt;Data{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Documento{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Descrição{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Categoria{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Cliente/Fornecedor{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Quantia (R$){amp}lt;/th{amp}gt; {amp}lt;th class="no-sort"{amp}gt;{amp}lt;span hidden="true"{amp}gt;Operações{amp}lt;/span{amp}gt;{amp}amp;nbsp;{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/thead{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;hr{amp}gt; {amp}lt;h5 class="modal-title text-center mb-3"{amp}gt;Novos Lançamentos{amp}lt;/h5{amp}gt; {amp}lt;form id="formCut"{amp}gt; 
  {amp}lt;table id="table_new" class="display table table-striped table-hover" style="overflow-x:auto; width: 100%; height: 100%;"{amp}gt; {amp}lt;thead{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th{amp}gt;Data{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Documento{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Descrição{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Categoria{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Cliente/Fornecedor{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Quantia (R$){amp}lt;/th{amp}gt; {amp}lt;th class="no-sort"{amp}gt;{amp}lt;span hidden="true"{amp}gt;Operações{amp}lt;/span{amp}gt;{amp}amp;nbsp;{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/thead{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;/div{amp}gt; 

а вот и мой JS:

 function open_modal_release_cut() { $('.loading').show(); var account_id = $('#account_id').val(); var oid = $('#oid').val(); $('#table_cut_release').DataTable({ 'sDom': 't', "paging": false, "ordering": false, "info": false, "searching": false, "serverSide": false, "ajax": { url: RootApi.url   "/v1/transaction_account/release/"   oid   "?account_id="   account_id   '{amp}amp;answerWithData=true', "contentType": "application/json", "type": "GET", "beforeSend": function (request) { request.setRequestHeader("X-Token", RootApi.token); }, error: function (responseData, textStatus, errorThrown) { var error = 'Houve um erro, ao concluir a solicitação. Por favor, entre em contato com a equipe técnica!'; if (typeof responseData.responseText !== 'undefined') { var error_message = JSON.parse(responseData.responseText); error = error_message.message; } swal({ type: 'error', title: 'Oops...', text: error, allowEscapeKey: false }).then(function () { window.location = RootApp.url   "/app"; }); } }, "columns": [ { data: { "_": null, "filter": "due_date", "name": "due_date" }, render: function (data, type, row) { var display_data = content_complete_data(data, 'release'); var content_data = ''; content_data  = '{amp}lt;a id="detail_'   data.id   '" href="'   RootApp.url   '/transactionaccount/form_release/'   data.id   '?account_id='   data.account_id   '" '; content_data  = ' title="Dados Completos {amp}lt;small{amp}gt;(selecione para editar){amp}lt;/small{amp}gt;" '; content_data  = ' data-trigger="hover" data-html="true" data-container="body" data-toggle="popover" data-placement="right" class="custom-popover" '; content_data  = ' data-content=" '; content_data  = display_data; content_data  = ' " '; content_data  = ' {amp}gt;{amp}lt;strong{amp}gt;'   moment(data.due_date).format('DD/MM/YYYY')   '{amp}lt;/strong{amp}gt;{amp}lt;/a{amp}gt; '; complete_data.push({id: "#detail_"   data.id, content: content_data}); return content_data; } }, { data: { "_": 'document', "filter": "document", "name": "document" } }, { data: { "_": null, "filter": "title", "name": "title" }, className: "center", render: function (data, type, row) { var returned = '{amp}lt;span class="row"{amp}gt;'   data.title; if (data.frequency_refer != null {amp}amp;{amp}amp; data.frequency_parcel != null) { returned  = '{amp}lt;span hidden="true"{amp}gt; | Parcela - {amp}lt;/span{amp}gt;{amp}lt;span class="badge badge-pill badge-secundary ml-2"{amp}gt;'   data.frequency_parcel   (data.frequency == 3 ? '/'   data.qtd_total_parcels : '')   '{amp}lt;/span{amp}gt;'; } returned  = '{amp}lt;/span{amp}gt;'; return returned; } }, { data: { "_": 'invoicecategory_id', "filter": "invoicecategory_id", "name": "invoicecategory_id" } }, { data: { "_": 'entity_id', "filter": "entity_id", "name": "entity_id" } }, { data: { "_": null, "filter": "price_paid", "name": "price_paid" }, className: "center", render: function (data, type, row) { var color = 'green'; if (data.price_paid {amp}lt; 0) { color = 'red'; } var price_paid = '{amp}lt;strong{amp}gt;{amp}lt;span style="color:'   color   '"{amp}gt;'   numeral(parseFloat(data.price_paid)).format('$0,0.00')   '{amp}lt;/span{amp}gt;{amp}lt;/strong{amp}gt;'; return price_paid; } }, { data: null, render: function (data, type, row) { var button = ""; button  = '{amp}lt;div class="pull-right"{amp}gt;'; button  = '{amp}lt;a href="javascript:add_rows_to_table()" class="icon icon-left s7-plus" style="color: green;"{amp}gt;{amp}lt;/a{amp}gt;'; button  = '{amp}lt;/a{amp}gt;'; button  = '{amp}lt;/div{amp}gt;'; return button; } } ], "columnDefs": [{ "targets": 'no-sort', "orderable": false, }], "initComplete": function (settings, json) { $.each(complete_data, function (key, val) { $(val.id).html(val.content); }); $('.loading').hide(); } }); $('#modal-release-cut').modal('show'); 

}

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