7
I would like to insert 2 inputs in a td, today my code works with only one input, and even saved the information in the database, but I need to include one more input to be inserted a password to authorize the update. Today it’s like this:
To
TDMaturing
To
TDValor
When I really wanted it to stay that way, both for the date and for the value.
follows example of the code.
$(document).ready(function() {
$('#tabelaEditavel tbody tr').each(function(i) {
$(this).children('td').each(function(p) {
if (($(this).attr('title') === 'Valor') || $(this).attr('title') === 'Vencimento') {
$(this).dblclick(function() {
if ($('td > input').length > 0) {
return;
}
var conteudoOriginal = $(this).text();
var novoElemento = $('<input/>', {
type: 'text',
value: conteudoOriginal
});
//tentei adicionar o input abaixo mas não funcionou
var passWord = $('<input/>', {
type: 'text',
value: '1234'
});
if ($(this).attr('title') === 'Valor') {
$(novoElemento)
.maskMoney({
prefix: 'R$ ',
allowNegative: true,
thousands: '',
decimal: ',',
affixesStay: true
});
}
if ($(this).attr('title') === 'Vencimento') {
$(novoElemento)
.mask("99/99/9999");
}
$(this).html(novoElemento.bind('blur keydown', function(e) {
var keyCode = e.which;
var conteudoNovo = $(this).val();
if (keyCode == 13 || keyCode == 9 || keyCode == 0 && conteudoNovo != '' && conteudoNovo != conteudoOriginal) {
var objeto = $(this);
$.ajax({
type: "POST",
url: "#",
data: {
id: $(this).parents('tr').children().first().text(),
campo: $(this).parent().attr('title'),
valor: conteudoNovo
},
success: function(result) {
objeto.parent().html(conteudoNovo);
$('body').append(result);
}
});
var posicao = p + 1;
$(this).parent()
.html(conteudoNovo)
.parents('tr');
} else if (keyCode == 27 || e.type == 'blur')
$(this).parent().html(conteudoOriginal);
}));
$(this).children().select();
});
};
});
});
});* {
font-family: Consolas
}
.tabelaEditavel {
border: solid 1px;
width: 100%
}
.tabelaEditavel td {
border: solid 1px;
}
.tabelaEditavel .celulaEmEdicao {
padding: 0;
}
.tabelaEditavel .celulaEmEdicao input[type=text] {
width: 100%;
border: 0;
background-color: rgb(255, 253, 210);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>
<!DOCTYPE html>
<table id="tabelaEditavel" class="tabelaEditavel">
<thead>
<tr>
<th>Código</th>
<th>Vencimento</th>
<th>Valor</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td>001</td>
<td title="Vencimento">14/06/2018</td>
<td title="Valor">R$ 189,52</td>
<td><button>A pagar</button></td>
</tr>
<tr id="2">
<td>002</td>
<td title="Vencimento">18/06/2018</td>
<td title="Valor">R$ 7859,25</td>
<td><button>A pagar</button></td>
</tr>
<tr id="3">
<td>003</td>
<td title="Vencimento">21/06/2018</td>
<td title="Valor">R$ 78,59</td>
<td><button>A pagar</button></td>
</tr>
</tbody>
</table>
I was confused by the question, you want to put an input text in a
td, to be able to enter the password, is that it? what the problem is happening?– Ricardo Pontual
actually it already inserts the inputs in the columns date and value, so you can change the due date and value, but I need to enter one more input so you can authorize with password.
– WMomesso
I edited the question I think it’s now easier to understand.
– WMomesso