Bom dia, Estou montando um formulário Pai Filho, onde preciso acrescentar SubCabeçalhos quando clicado em Adicionar. Não sei se estou montando da forma correta, mas o resultado que estou tendo é diferente do esperado. Segue:
Resultado:
A linha que pede dados da empresa só deveria aparecer quando clicado em Adicionar, mas já está sendo mostrada na abertura do formulário. Alguém tem um exemplo de como montar esse tipo de formulário?
Bom dia Robson,
Acredito que a forma correta de fazer isso que você está tentando é dentro do seu <tbody> você utilizar um único <tr> que irá definir o seu "layout" de cada linha que for adicionada.
Dentro desse <tr> você pode utilizar <div> dentro de cada <td> para organizar seus dados.
Precisei fazer algo similar e ficou mais ou menos assim:
<div class="col-md-12">
<input id="btnAdicionarDesp" name="btnAdicionarDesp" type="button" onclick="addChild('tblDespesas')" value="Adicionar Despesa" class="btn btn-primary btnAdicionar"/>
<table class="table" cellspacing="0" tablename="tblDespesas" noaddbutton="true" nodeletebutton="true">
<thead>
<tr class="tableHeadRow">
<th class="tableColumn colTrash"></th>
<th class="tableColumn">Data Doc. <br> Nº Doc.</th>
<th class="tableColumn">Conta Contábil <br> Nome Estabelecimento</th>
<th class="tableColumn">Desc. Conta <br> Qtde</th>
<th class="tableColumn">Valor R$</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-1 col-sm-1 col-lg-1 col-xs-1 colTrash">
<span class="fluig-style-guide fs-display-block fs-md-space">
<i class="fluigicon fluigicon-trash fluigicon-md" onclick="Javascript:fnWdkRemoveChild(this)" style="cursor:pointer"></i>
</span>
</td>
<td class="col-md-2 col-sm-2 col-lg-2 col-xs-2">
<div class="row">
<div class="form-group fs-cursor-pointer col-md-11 col-sm-11 col-lg-11 col-xs-11" id="dtDoc">
<div class="input-group data">
<input type="text" class="form-control" name="txtDtDoc" id="txtDtDoc" readonly="readonly"/>
<span class="input-group-addon"><span class="fluigicon fluigicon-calendar"> </span></span>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-11 col-sm-11 col-lg-11 col-xs-11">
<input type="text" class="form-control cpoForm" id="txtNrDoc" name="txtNrDoc" placeholder="Nr. Documento">
</div>
</div>
</td>
<td class="col-md-4">
<div class="row">
<div class="form-group col-md-11 col-sm-11 col-lg-11 col-xs-11">
<input type="hidden" class="form-control cpoForm" id="txtNatureza" name="txtNatureza">
<input
type="zoom" name="txtConta" id = "txtConta" class="cpoForm"
data-zoom="{
'displayKey':'ED_CONTA',
'datasetId':'ds_naturezaContaContabil',
'filterValues':'active,true',
'fields':[
{'field':'ED_CONTA', 'label':'Conta Contábil'},
{'field':'ED_CODIGO', 'label':'Natureza', 'standard':'true'},
{'field':'ED_DESCRIC', 'label':'Descrição'}]
}" />
</div>
</div>
<div class="row">
<div class="form-group col-md-11 col-sm-11 col-lg-11 col-xs-11">
<input type="text" class="form-control cpoForm" id="txtNomeEstab" name="txtNomeEstab" placeholder="Nome Estabelecimento">
</div>
</div>
</td>
<td class="col-md-3">
<div class="row">
<div class="form-group col-md-11 col-sm-11 col-lg-11 col-xs-11">
<input type="text" class="form-control cpoForm" id="txtDescConta" name="txtDescConta" readonly="readonly">
</div>
</div>
<div class="row">
<div class="form-group col-md-11 col-sm-11 col-lg-11 col-xs-11">
<input type="text" class="form-control cpoForm" id="txtQtde" name="txtQtde" mask="#0.000.000" placeholder="Qtde">
</div>
</div>
</td>
<td class="col-md-2">
<div class="row">
<div class="form-group col-md-11 col-sm-11 col-lg-11 col-xs-11">
<input type="text" class="form-control cpoForm" id="txtValor" name="txtValor" mask="#0.000.000,00" placeholder="Valor">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>Abraço!
@Robson,
O Ideal é ter seu botão customizado fora do table e dentro do tbody pode somente ter 1
— Gabriel Franco da Rocha Nascimento 22 de Aug de 2018<tr>. Você criou um Pai x Filho para adicionar vários Candidatos?