0

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>

1 Resposta 1

1

Não sei se entendi muito bem o que faltou pra você finalizar o que precisa, mas inicialmente vc já criou um objeto contendo o DOM da copia, basta manipula-lo antes da inserção na sua tabela. No exemplo atribui um ID e classe ao tbody.

Caso a alteração tenha que ser dentro do TD, basta alterar o thisCopia para que ele procure o TD e adicione a classe: thisCopia.find('td').attr('id')...

// 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() {
  var thisCopia = $(copia);
  thisCopia.attr('id', 'seuID').addClass('copia');
  $("#tabela-herdeiro").append(thisCopia);
});





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
}
.copia {
  background-color: yellow;
}
<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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .