[Resolvido] Tabela com Varias Linhas

manolegal · Dezembro 16, 2011

Ola amigos do Forum.

Estou desenvolvendo um sistema para concessao de auxilios. Tenho algumas duvidas. Vamos à primeira.

Baseando-se em um código aqui da web, me aproximei do que preciso. Nao entendo muito de javascript. Preciso que na tabela de Detalhes do Auxilio sejam digitados 05 campos. A primeira linha que insiro, consigo fazer a inserçao das 05 colunas, mas apartir da segunda linha, só consigo inserir dados somente em 03 colunas. Imagino q o problema esteja no javascript, mas como falei, nao tenho muita experiencia neste ramo. No aguardo de auxilio. Ate +.

Parte do código:

<script language="javascript" type="text/javascript">
function addRowToTable() {
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);

// left cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);

// right cell
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('name', 'txtRow' + iteration);
el.setAttribute('id', 'txtRow' + iteration);
el.setAttribute('size', '30');
el.onkeypress = keyPressTest;
cellRight.appendChild(el);

var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('name', 'txtRow' + iteration);
el.setAttribute('id', 'txtRow' + iteration);
el.setAttribute('size', '30');
el.onkeypress = keyPressTest;
cellRight.appendChild(el);

var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('name', 'txtRow' + iteration);
el.setAttribute('id', 'txtRow' + iteration);
el.setAttribute('size', '30');
el.onkeypress = keyPressTest;
cellRight.appendChild(el);
}

function keyPressTest(e, obj) {
var validateChkb = document.getElementById('chkValidateonkeypress');
if (validateChkb.checked) {
var displayObj = document.getElementById('spanOutput');
var key;
if(window.event) {
key = window.event.keyCode;
}
else if(e.which) {
key = e.which;
}
var objId;
if (obj != null) {
objId = obj.id;
} else {
objId = this.id;
}
displayObj.innerHTML = objId + ' : ' + String.fromCharCode(key);
}
}

function removeRowFromTable() {
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
function openInNewWindow(frm)
{
// open a blank window
var aWindow = window.open('', 'TableAddRowNewWindow',
'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');

// set the target to the blank window
frm.target = 'TableAddRowNewWindow';

// submit
frm.submit();
}
</script>


<table width="80%" border="1" cellspacing="0" cellpadding="0" align="center" id="tblSample">

<tr bgcolor="#000039">
   <td align="center" colspan="6"><strong><font color="#FFFFFF">Detalhes do Auxilio</font></strong></td>
</tr>

<tr>
  <td width="10%">Controle</td>
  <td width="25%">Tipo Dcto Fiscal</td>
  <td width="15%">Numero Dcto Fiscal</td>
  <td width="20%">Valor Dcto Fiscal</td>
  <td width="20%">Data Dcto Fiscal</td>
  <td width="10%">Tipo Auxilio</td>
</tr>

<tr>
  <td><div align="left">
 <input name="controle[]" id="controle" type="text" size="15" maxlength="12">
  </div></td>
  <td><div align="left">
 <input name="tipo_dcto_fiscal[]" id="tipo_dcto_fiscal" type="text" size="15" maxlength="12">
  </div></td>
  <td><div align="left">
 <input name="numero_dcto_fiscal[]" type="text" size="20" maxlength="12">
  </div></td>
  <td><div align="left">
 <input name="valor_dcto_fiscal[]" type="text" size="9">
  </div></td>
  <td><div align="left">
 <input name="data_dcto_fiscal[]" type="text" size="10" maxlength="10">
  </div></td>
  <td><div align="left">
 <input name="tipo_auxilio[]" type="text" size="15" maxlength="12">
  </div></td>
</tr>

</table>

manolegal · Dezembro 23, 2011

Fiz algumas alteracoes e consegui incluir os 05 campos necessarios. O código ficou assim:

<script language="javascript" type="text/javascript">
function addRowToTable() {
var tbl = document.getElementById('detalhes');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1 - //se não houver cabeçalho da linha da tabela, depois iteração lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow); // cria outra linha

// left cell titulo
var cellLeft = row.insertCell(0); // insere uma celula a esquerda
var textNode = document.createTextNode(iteration); // esquerda cria o numero
cellLeft.appendChild(textNode); // fecha a celular da esquerda

// right cell (Tipo Documento Fiscal)
var cellRight1 = row.insertCell(1);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('name', 'tipo_dcto_fiscal' + iteration);
el.setAttribute('id', 'tipo_dcto_fiscal' + iteration);
el.setAttribute('size', '30');
el.onkeypress = keyPressTest;
cellRight1.appendChild(el);

// right cell (Numero Documento Fiscal)
var cellRight2 = row.insertCell(2);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('name', 'numero_dcto_fiscal' + iteration);
el.setAttribute('id', 'numero_dcto_fiscal' + iteration);
el.setAttribute('size', '30');
el.onkeypress = keyPressTest;
cellRight2.appendChild(el);

// right cell (Valor Documento Fiscal)
var cellRight3 = row.insertCell(3);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('name', 'valor_dcto_fiscal' + iteration);
el.setAttribute('id', 'valor_dcto_fiscal' + iteration);
el.setAttribute('size', '30');
el.onkeypress = keyPressTest;
cellRight3.appendChild(el);

// right cell (Valor Documento Fiscal)
var cellRight4 = row.insertCell(4);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('name', 'data_dcto_fiscal' + iteration);
el.setAttribute('id', 'data_dcto_fiscal' + iteration);
el.setAttribute('size', '30');
el.onkeypress = keyPressTest;
cellRight4.appendChild(el);

// right cell (Data Documento Fiscal)
var cellRight5 = row.insertCell(5);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('name', 'tipo_auxilio' + iteration);
el.setAttribute('id', 'tipo_auxilio' + iteration);
el.setAttribute('size', '30');
el.onkeypress = keyPressTest;
cellRight5.appendChild(el);
}

function keyPressTest(e, obj) {
var validateChkb = document.getElementById('chkValidateonkeypress');
if (validateChkb.checked) {
var displayObj = document.getElementById('spanOutput');
var key;
if(window.event) {
key = window.event.keyCode;
}
else if(e.which) {
key = e.which;
}
var objId;
if (obj != null) {
objId = obj.id;
} else {
objId = this.id;
}
displayObj.innerHTML = objId + ' : ' + String.fromCharCode(key);
}
}

function removeRowFromTable() {
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
function openInNewWindow(frm)
{
// open a blank window
var aWindow = window.open('', 'TableAddRowNewWindow',
'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');

// set the target to the blank window
frm.target = 'TableAddRowNewWindow';

// submit
frm.submit();
}
</script>


<table width="80%" border="1" cellspacing="0" cellpadding="0" align="center" id="detalhes">

<tr bgcolor="#000039">
   <td align="center" colspan="6"><strong><font color="#FFFFFF">Detalhes do Auxilio<? echo $pasta; ?></font></strong></td>
</tr>

<tr>
  <td width="10%">Controle</td>
  <td width="25%">Tipo Dcto Fiscal</td>
  <td width="15%">Numero Dcto Fiscal</td>
  <td width="20%">Valor Dcto Fiscal</td>
  <td width="20%">Data Dcto Fiscal</td>
  <td width="10%">Tipo Auxilio</td>
</tr>

<tr>
  <td><div align="left">
 <input name="controle[]" id="controle" type="text" size="15" maxlength="12">
  </div></td>
  <td><div align="left">
 <input name="tipo_dcto_fiscal[]" id="tipo_dcto_fiscal" type="text" size="15" maxlength="12">
  </div></td>
  <td><div align="left">
 <input name="numero_dcto_fiscal[]" type="text" size="20" maxlength="12">
  </div></td>
  <td><div align="left">
 <input name="valor_dcto_fiscal[]" type="text" size="9">
  </div></td>
  <td><div align="left">
 <input name="data_dcto_fiscal[]" type="text" size="10" maxlength="10" onkeypress="return handleEnter(this, event) && formatar_mascara(this, '##/##/####')" onfocus="mudacor(this,'yellow')" onblur="mudacor(this,'white')"
onKeyUp = "this.value=formateadata(this.value);">
  </div></td>
  <td><div align="left">
 <input name="tipo_auxilio[]" type="text" size="15" maxlength="12">
  </div></td>
</tr>

</table>



<table width="80%" border="1" cellspacing="0" cellpadding="0" align="center">

<tr>
 <td>
  <input type="button" value="Adicionar" onclick="addRowToTable();" />
  <input type="button" value="Remover" onclick="removeRowFromTable();" />
 </td>
</tr>

</table>



<br>



<table width="80%" border="1" cellspacing="0" cellpadding="0" align="center">

<tr>
   <td><div align="center"><input type="submit" name="gravar" value="Gravar"></div></td>
</tr>

</table>

O problema agora que na pagina que recebe os dados, esta aparecendo apenas os dados digitados na primeira linha. Mesmo que eu insira varias linhas somente aparece os dados da primeira linha. Se alguém tiver algum auxilio, desde ja agradeço.

manolegal · Março 19, 2012

Olá amigos.

O problema da pagina que recebe os dados, de mostrar apenas os dados digitados na primeira linha, consegui resolver.

Estou com problema agora em uma mascara de entrada de um campo:

<td>
<input name="data_dcto_fiscal[]" id="data_dcto_fiscal[]" type="text" size="12" maxlength="10" onkeypress="return handleEnter(this, event) && formatar_mascara(this, '##/##/####')" onfocus="mudacor(this,'yellow')" onblur="mudacor(this,'white')"
onKeyUp = "this.value=formateadata(this.value);">
</td>

Como implemento o javascript no código abaixo?

// right cell (Data Documento Fiscal)
var cellRight4 = row.insertCell(4);
var e4 = document.createElement('input');
cellRight4.setAttribute('align', 'left');
e4.setAttribute('class', 'campo');
e4.setAttribute('type', 'text');
e4.setAttribute('name', 'data_dcto_fiscal[]');
e4.setAttribute('id', 'data_dcto_fiscal' + iteration);
e4.setAttribute('maxlength', '10');
e4.setAttribute('size', '12');
e4.setAttribute('onkeypress', ___________________);
cellRight4.appendChild(e4);

Alguém teria alguma dica? É muito importante para mim.

manolegal · Abril 14, 2012

Se alguém tiver alguma dica, agradeço.

manolegal · Abril 20, 2012

Problema resolvido. Tópico pode ser encerrado.

Entrar

Arquivado

[Resolvido] Tabela com Varias Linhas

Recommended Posts

manolegal 12

Compartilhar este post

Link para o post

Compartilhar em outros sites

manolegal 12

Compartilhar este post

Link para o post

Compartilhar em outros sites

manolegal 12

Compartilhar este post

Link para o post

Compartilhar em outros sites

manolegal 12

Compartilhar este post

Link para o post

Compartilhar em outros sites

manolegal 12

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante