我需要创建一个可以添加和删除行的表，这些行必须具有输入字段。
我想做的是：wonder
我所拥有的是：reality
顶部是我的数据表，底部是我需要创建的表，它需要有一些输入字段和一个可以删除行的按钮，我尝试了很多方法，但是没有一个它们似乎有效，您能给我一个如何正确执行此操作的线索吗？
这是我的html：
<div class="modal-body"> <h5 class="modal-title text-center">Lançamento Original</h5> <table id="table_cut_release" class="display table table-striped table-hover" style="overflow-x:auto; width: 100%; height: 100%;"> <thead> <tr> <th>Data</th> <th>Documento</th> <th>Descrição</th> <th>Categoria</th> <th>Cliente/Fornecedor</th> <th>Quantia (R$)</th> <th class="no-sort"><span hidden="true">Operações</span> </th> </tr> </thead> </table> <hr> <h5 class="modal-title text-center mb-3">Novos Lançamentos</h5> <form id="formCut">
<table id="table_new" class="display table table-striped table-hover" style="overflow-x:auto; width: 100%; height: 100%;">
<thead>
<tr>
<th>Data</th>
<th>Documento</th>
<th>Descrição</th>
<th>Categoria</th>
<th>Cliente/Fornecedor</th>
<th>Quantia (R$)</th>
<th class="no-sort"><span hidden="true">Operações</span> </th>
</tr>
</thead>
</table>
</div>
这里是我的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 + '&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 += '<a id="detail_' + data.id + '" href="' + RootApp.url + '/transactionaccount/form_release/' + data.id + '?account_id=' + data.account_id + '" ';
content_data += ' title="Dados Completos <small>(selecione para editar)</small>" ';
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 += ' ><strong>' + moment(data.due_date).format('DD/MM/YYYY') + '</strong></a> ';
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 = '<span class="row">' + data.title;
if (data.frequency_refer != null && data.frequency_parcel != null) {
returned += '<span hidden="true"> | Parcela - </span><span class="badge badge-pill badge-secundary ml-2">' + data.frequency_parcel + (data.frequency == 3 ? '/' + data.qtd_total_parcels : '') + '</span>';
}
returned += '</span>';
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 < 0) {
color = 'red';
}
var price_paid = '<strong><span style="color:' + color + '">' + numeral(parseFloat(data.price_paid)).format('$0,0.00') + '</span></strong>';
return price_paid;
}
},
{
data: null,
render: function (data, type, row) {
var button = "";
button += '<div class="pull-right">';
button += '<a href="javascript:add_rows_to_table()" class="icon icon-left s7-plus" style="color: green;"></a>';
button += '</a>';
button += '</div>';
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');
}
下面的代码回答了您的问题。注释中的解释。它使用香草js。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
table {
width: 70%;
margin-left: auto;
margin-right: auto;
background-color: #aaa;
text-align: left;
}
table tr {
background-color: #fff;
}
table tr * {
padding: 4px;
}
hr {
border-top: 1px solid #efefef;
width: 70%;
margin-left: auto;
margin-right: auto;
background-color: #aaa;
margin-top: 50px;
margin-bottom: 50px;
}
</style>
<table>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th></th>
</tr>
<tr>
<td><input type="text" placeholder="Enter text here.." id="field1" /></td>
<td><input type="text" placeholder="Enter text here.." id="field2" /></td>
<td><input type="text" placeholder="Enter text here.." id="field3" /></td>
<td><input type="button" value="Add Row" title="Click to add a row" onclick="addRow()" /></td>
</tr>
</table>
<hr />
<table id="table2">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th></th>
</tr>
</table>
<script>
function addRow() {
//getting the text entered by the user in the input
let value1 = document.getElementById("field1").value;
let value2 = document.getElementById("field2").value;
let value3 = document.getElementById("field3").value;
//Now lets insert a row which will contains cells
let row = document.getElementById("table2").insertRow(-1);
//these cells will contain value1, value2, value3 and a removeButton
let cell1 = row.insertCell(-1);
cell1.innerHTML = value1;
let cell2 = row.insertCell(-1);
cell2.innerHTML = value2;
let cell3 = row.insertCell(-1);
cell3.innerHTML = value3;
//lets now add a cell which will contain the 'Remove Row' button
let cell4 = row.insertCell(-1);
cell4.innerHTML = "<input type=\"button\" value=\"Remove Row\" title=\"Click to remove this row\" onClick=\"removeRow()\"/>";
}
function removeRow() {
//Explanation of below line:
//- event.target means the clicked button which triggered this function
//- event.target.parentNode means the <td> tag which contains the clicked button
//- event.target.parentNode.parentNode means the <td> tag which contains the clicked button
//- event.target.parentNode.parentNode.rowIndex will give us the 'Index' of the row which contains the clicked button
//- myTable.deleteRow(rowIndex) will delete the row with index=rowIndex in the table 'myTable'
document.getElementById("table2").deleteRow(event.target.parentNode.parentNode.rowIndex);
}
</script>
</body>
</html>