RESOLVIDO! Tabela Dinamica JavaScript

Front-end
#1

Galera fiz uma tabela dinamica mais estou com algumas duvidas para pegar os objetos relacionandos a determinada linha, vejam so como estou fazendo:

Lembrando que esta tudo funcionando (adicionando e removendo linhas)

var TABLE_NAME = 'tblSample'; // this should be named in the HTML
var ROW_BASE = 1; // first number (for display)
var hasLoaded = false;

window.onload=fillInRows;

function fillInRows()
{
	hasLoaded = true;	
}

function addRowToTable(num)
{
	if (hasLoaded) {
		var tbl = document.getElementById(TABLE_NAME);
		var nextRow = tbl.tBodies[0].rows.length;
		var iteration = nextRow + ROW_BASE;
		if (num == null) { 
			num = nextRow;
		} else {
			iteration = num + ROW_BASE;
		}
		
		// add the row
		var row = tbl.tBodies[0].insertRow(num);
		
		// Estilo da Classe da tabela
		row.className = 'classy' + (iteration % 2);
	
		//Adiciona campos na tabela
		
		// cell 0 - text
		var cell0 = row.insertCell(0);
		var textNode = document.createTextNode(iteration);
		cell0.appendChild(textNode);
		
		// cell 1 - input text
		var cell1 = row.insertCell(1);
		var txtInp = document.createElement('input');
		txtInp.setAttribute('type', 'text');
		txtInp.setAttribute('name', "nome");
		txtInp.setAttribute('size', '5');
		txtInp.setAttribute('value',""); // iteration included for debug purposes
		cell1.appendChild(txtInp);
		
		// cell 2 - input text
		var cell2 = row.insertCell(2);
		var txtInp2 = document.createElement('input');
		txtInp2.setAttribute('type', 'text');
		txtInp2.setAttribute('name', "teste");
		txtInp2.setAttribute('size', '30');
		txtInp2.setAttribute('value',""); // iteration included for debug purposes
		cell2.appendChild(txtInp2);
		
		// cell 3 - input button
		var cell3 = row.insertCell(3);
		var btnEl = document.createElement('input');
		btnEl.setAttribute('type', 'button');
		btnEl.onclick = function () {deleteCurrentRow(this)};
		btnEl.setAttribute('value', 'Delete');
		cell3.appendChild(btnEl);
				
	}
}

function deleteCurrentRow(obj)
{
	if (hasLoaded) {
		var delRow = obj.parentNode.parentNode;
		var tbl = delRow.parentNode.parentNode;
		var rIndex = delRow.sectionRowIndex;
		var rowArray = new Array(delRow);
		
		obj = document.getElementsByTagName("input");
		
		for (var i=0; i<rowArray.length; i++) {
			
			var rIndex = rowArray[i].sectionRowIndex;
			rowArray[i].parentNode.deleteRow(rIndex);
			

                                                //Aqui estou fazendo um for para pegar o alert de todos os objetos do tipo input.
			for(i=0; i< obj.length; i++){
				if(obj[i].getAttribute("type") == "text"){
					alert(obj[i].value);
				}
			}
			alert(rIndex + 1);			
		}			   
	}
}

Digamos que eu quero pegar todos os values dos input mais que pertencem a mesma linha, como eu faço?

No caso essa tabela eu quero usa-la para inserir,alterar e excluir dados no banco dinamicamente mais para isso preciso ter um controle total sob meus inputs, alguem pode me dar uma ideia de como fazer isso?

#2

Cara, vê se isto ajuda…

na “addRowToTable(num)” adiciona mais uma coluna para o teste…

// cell 4 - O TESTE var cell4 = row.insertCell(4); var btnEl = document.createElement('input'); btnEl.setAttribute('type', 'button'); btnEl.onclick = function () {testeCurrentRow(this)}; btnEl.setAttribute('value', 'TESTE'); cell4.appendChild(btnEl);
… e então cria a função que irá mostrar o conteúdo a ser tratado.

function testeCurrentRow(obj) { if (hasLoaded) { var linha = obj.parentNode.parentNode; for (var coluna=0; coluna<linha.cells.length; coluna++) { var celula = linha.cells[coluna].firstChild; alert(celula.name + ': ' + celula.value); } } }

#3

Valeu cara, era isso mesmo que eu estava precisando :slight_smile:

#4

Alguem sabe como colocar o efeito zebrado na tabela.

At.
Carlos Eduardo

#5