Adicionar filhos a tabela

Ambiente Fluig
, ,
1

Tenho uma tabela em que há dois cabeçalhos.

<thead>
								<tr class="tableHeadRow active" style="white-space: nowarp">
									<th class="tableColumn" style="text-align: center; border-right: 1px solid #d1d3d4;" colspan="2">Entradas do Dia</th>
									<th class="tableColumn" style="text-align: center; border-right: 1px solid #d1d3d4;" colspan="2">Atrasados</th>
									<th class="tableColumn" style="text-align: center; border-right: 1px solid #d1d3d4;" colspan="2">Carteira Total</th>
									<th class="tableColumn" style="text-align: center; border-right: 1px solid #d1d3d4;" colspan="2">Recebimento Antecipado</th>
								</tr>
								<tr class="tableHeadRow active" name="tHead2Receber" id="tHead2Receber">
									<th class="tableColumn" style="text-align: center;">Cliente</th>
									<th class="tableColumn" style="text-align: center; border-right: 1px solid #d1d3d4;">Valor</th>
									<th class="tableColumn" style="text-align: center;">Cliente</th>
									<th class="tableColumn" style="text-align: center; border-right: 1px solid #d1d3d4;">Valor</th>
									<th class="tableColumn" style="text-align: center;">Cliente</th>
									<th class="tableColumn" style="text-align: center; border-right: 1px solid #d1d3d4;">Valor</th>
									<th class="tableColumn" style="text-align: center;">Cliente</th>
									<th class="tableColumn" style="text-align: center; border-right: 1px solid #d1d3d4">Valor</th>
								</tr>
							</thead>

Dessa forma como esta acima, e, tem o corpo dela.

<tbody>
								<tr style="display:none" detail="true" detailname="contas_receber" class="tableBodyRow">
									<td style="vertical-align: middle; text-align: center; padding: 5px;">
										<div class="form-input">
											<input style="height: 25px; min-width: 375px" autocomplete="off" type="text" name="entrada_cliente" id="entrada_cliente" class="form-control input-sm table-field block-itens" readonly>
										</div>
									</td>
									<td style="vertical-align: middle; text-align: center; padding: 5px; border-right: 1px solid #d1d3d4;">
										<div class="form-input">
											<input style="height: 25px; min-width: 125px;" autocomplete="off" type="text" name="entrada_valor" id="entrada_valor" class="form-control input-sm table-field block-itens" readonly>
										</div>
									</td>
									<td style="vertical-align: middle; text-align: center; padding: 5px;">
										<div class="form-input">
											<input style="height: 25px; min-width: 375px" autocomplete="off" type="text" name="atrasado_cliente" id="atrasado_cliente" class="form-control input-sm table-field block-itens" readonly>
										</div>
									</td>
									<td style="vertical-align: middle; text-align: center; padding: 5px; border-right: 1px solid #d1d3d4;">
										<div class="form-input">
											<input style="height: 25px; min-width: 125px;" autocomplete="off" type="text" name="atrasado_valor" id="atrasado_valor" class="form-control input-sm table-field block-itens" readonly>
										</div>
									</td>
									<td style="vertical-align: middle; text-align: center; padding: 5px;">
										<div class="form-input">
											<input style="height: 25px; min-width: 375px" autocomplete="off" type="text" name="carteira_cliente" id="carteira_cliente" class="form-control input-sm table-field block-itens" readonly>
										</div>
									</td>
									<td style="vertical-align: middle; text-align: center; padding: 5px; border-right: 1px solid #d1d3d4;">
										<div class="form-input">
											<input style="height: 25px; min-width: 125px;" autocomplete="off" type="text" name="carteira_valor" id="carteira_valor" class="form-control input-sm table-field block-itens" readonly>
										</div>
									</td>
									<td style="vertical-align: middle; text-align: center; padding: 5px;">
										<div class="form-input">
											<input style="height: 25px; min-width: 375px" autocomplete="off" type="text" name="recebimento_cliente" id="recebimento_cliente" class="form-control input-sm table-field block-itens" readonly>
										</div>
									</td>
									<td style="vertical-align: middle; text-align: center; padding: 5px; border-right: 1px solid #d1d3d4;">
										<div class="form-input">
											<input style="height: 25px; min-width: 125px;" autocomplete="off" type="text" name="recebimento_valor" id="recebimento_valor" class="form-control input-sm table-field block-itens" readonly>
										</div>
									</td>
								</tr>
							</tbody>

Dessa forma. Porém, quando vou adicionar um filho a ela com a função wdkAddChild o mesmo adiciona a linha dois do cabeçalho.
Ficando dessa forma:

image
image1751×357 21.3 KB

Alguém conseguiria me ajudar? Tentei referenciar o tbody na função de adicionar filhos, porém, ele solicita apenas o nome da tabela.

Obs.: No HTML quando exporto o formulário para o servidor, ele vem dessa forma:

image
image1002×635 27.5 KB

Com algumas classes e outras tags que não defini no formulário pelo eclipse.

Detalhe: A segunda linha por padrão ela vem em estado de hide (escondido), inseri no código um .show() no carregamento da página, por isso aparece a segunda linha.

2

Consegui resolver.

Pra quem estiver com esse mesmo problema, eu removi atráves do JS as propriedades (detail, detailname) da segunda tag do cabeçalho e removi o name e o id também, manipulando ele pela classe.

$(document).ready(function() {
	$(".tHead2Receber").show();
	document.querySelector("#contas_receber > thead > tr.tableHeadRow.active.tHead2Receber").removeAttribute("detail","detail")
	document.querySelector("#contas_receber > thead > tr.tableHeadRow.active.tHead2Receber").removeAttribute("detailname","detailname")
}

Agora no momento de adicionar, ele adiciona o tr que esta no tbody, que é o certo, pois são os inputs da tabela!

1 curtida
3

Olá, uma sugestão também é utilizar divs. Quando a tabela é muito detalhada, deixo o cabeçalho em branco e coloco divs dentro da td, assim dimensiono os campos e faço quebras de linha. Olha como fica:

image
image827×703 22.2 KB

1 curtida
4

Caramba, não tinha pensado nessa possibilidade, interessante para se usar em algumas ocasiões como essa e fica bem legal o layout.

Esse símbolo de - (menos) no canto superior direito, ele serve pra diminuir a div e deixar como se fosse apenas uma linha?

5

Sim, a mesma função que é utilizada para remover a linha da tabela, no caso a div e o botão “remover” ficam dentro da td, que seria a linha da tabela.