Estou utilizando a solução que vi nesnte topico para inserir novos campos a uma tabela Adicionar Linha
Porem preciso que cada linha inserida venha com um ID, isso porque terei que pegar alguns dados do banco e retornar para uma determinada linha.
A ideia e assim que adicionar uma nova linha, esta linha automaticamente venha com o ID da TD dados_usuario_id com um id para que eu possa atribuir os dados vindos da consulta aou BD dentro dela
O codigo ficou assim
// já cria logo uma cópia do TBODY original
var copia = document.querySelector("#tabela-herdeiro tbody").outerHTML;
$(document).on("click", "#tabela-herdeiro button", function(){
var tr = $(this).closest("tbody");
tr.fadeOut(400, function(){
this.remove();
});
});
$("#adicionar").on("click", function(){
$("#tabela-herdeiro").append(copia);
});
function fMasc(objeto,mascara) {
obj=objeto
masc=mascara
setTimeout("fMascEx()",1)
}
function fMascEx() {
obj.value=masc(obj.value)
}
function mTel(tel) {
tel=tel.replace(/\D/g,"")
tel=tel.replace(/^(\d)/,"($1")
tel=tel.replace(/(.{3})(\d)/,"$1)$2")
if(tel.length == 9) {
tel=tel.replace(/(.{1})$/,"-$1")
} else if (tel.length == 10) {
tel=tel.replace(/(.{2})$/,"-$1")
} else if (tel.length == 11) {
tel=tel.replace(/(.{3})$/,"-$1")
} else if (tel.length == 12) {
tel=tel.replace(/(.{4})$/,"-$1")
} else if (tel.length > 12) {
tel=tel.replace(/(.{4})$/,"-$1")
}
return tel;
}
function mCNPJ(cnpj){
cnpj=cnpj.replace(/\D/g,"")
cnpj=cnpj.replace(/^(\d{2})(\d)/,"$1.$2")
cnpj=cnpj.replace(/^(\d{2})\.(\d{3})(\d)/,"$1.$2.$3")
cnpj=cnpj.replace(/\.(\d{3})(\d)/,".$1/$2")
cnpj=cnpj.replace(/(\d{4})(\d)/,"$1-$2")
return cnpj
}
function mCPF(cpf){
cpf=cpf.replace(/\D/g,"")
cpf=cpf.replace(/(\d{3})(\d)/,"$1.$2")
cpf=cpf.replace(/(\d{3})(\d)/,"$1.$2")
cpf=cpf.replace(/(\d{3})(\d{1,2})$/,"$1-$2")
return cpf
}
function mCEP(cep){
cep=cep.replace(/\D/g,"")
cep=cep.replace(/^(\d{2})(\d)/,"$1.$2")
cep=cep.replace(/\.(\d{3})(\d)/,".$1-$2")
return cep
}
function mNum(num){
num=num.replace(/\D/g,"")
return num
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-large btn-success btn-xs" id="adicionar">Adicionar atleta</button>
<br>
<table class="table table-bordered table-hover" id="tabela-herdeiro">
<thead style=" background: #2196f3; color: #fff">
<tr>
<th >CPF</th>
<th>Dados do usuario</th>
<th>Remover</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="cpf_cliente_equipe" value="" class="form-control cpf_inscricao" onkeydown="javascript: fMasc( this, mCPF );" maxlength="14" required="required" style=" max-width: 150px;"/>
</td>
<td id="dados_usuario_id"style="vertical-align:middle;" >
</td>
<td style="vertical-align:middle;">
<button class="btn btn-large btn-danger btn-xs" type="button">Remover</button>
</td>
</tr>
</tbody>
</table>