[Resolvido] Somar valores

[João Augusto 0]

Fala galera beleza?

Eu to com um certo problema aqui pra resolver, eu tenho um grid com alguns inputs checkbox, eu preciso pegar um valor do <td> pelo id dele,identificado pelo id do checkbox pra saber qual está marcado e ir somando ou subitraindo de um valor dentro de um input text. Isso acontecendo na tela, ou seja, o cara marca o check e o valor vai mudando, seja ele somando ou subitraindo.

Ex:

 

<table width="835"align="center">
 <tr>
  <td> </td>
  <td> Data</td>
  <td>Histórico</td>
  <td>Nº do Cheque</td>
  <td>Tipo</td>
  <td>Valor</td>
</tr>             
 <tr class="corpo-mono">
  <td align="center"><input type="checkbox" name="lc1" id="lc1" value="1"></td>
  <td width="61">17/05/2010</td><td>testefsdf445465465654</td><td>000000001</td>
  <td align="center">C</td>
  <td align="right" id="nc1">150,00</td>
 </tr>
 <tr class="corpo-mono" bgcolor="#D9F9EF">
  <td align="center"><input type="checkbox" name="lc2" id="lc2" value="2"></td>
  <td width="61">17/05/2010</td>
  <td>fdsalkjsdfljkdsfalkjfdsalkjfaslkj</td>
  <td>111000</td><td align="center">C</td>
  <td align="right" id="nc2">10,00</td>
 </tr>
</table><br>
<table>
 <tr class="corpo-mono">
    <td width="174" height="22" align="right">Saldo no Extrato:</td>
    <td width="209" align="left">
                      <input type="text" name="sl" value="[sl23]" class="input_text" readonly="readonly" size="9" style="text-align:right;"></td>
     <td width="65"> </td>
     <td width="211" align="right"> </td>
     <td width="91" align="left"> </td>
  </tr>
</table>

Eu quero pegar os valores que estão na coluna valor e colocar no input text do Saldo no Extrato, sendo que o input já virá com um valor acrescido.Sendo assim somando ou subitraindo e aparecendo na hora para o usuário...

Se alguém puder me ajudar nessa....

Vlw....

[William Bruno 1501]

tá... começou a fazer ?

 

qual é a dúvida ?

[João Augusto 0]

Eu queria uma ajuda pra dar o pontapé, pra poder começar pois não saco mt ainda de javascript a esse nível só sei mais as ações básicas, se você puder me ajudar.

[William Bruno 1501]

hum.. exemplo para estudo:

<script type="text/javascript">
function id( el ){
	return document.getElementById( el );
}
function faz_conta( valor )
{
	id('s1').value = parseFloat( id('s1').value ) + parseFloat( valor );
}
window.onload = function()
{
	var inputs = id('grid').getElementsByTagName('input');
	for( var i=0; i<inputs.length; i++ )
	{
		if( inputs[i].type=='checkbox' )
		{
			inputs[i].onclick = function()
			{
				valor = this.value.replace(',','.');
				var valor = this.checked ? valor : -1*valor;
				
				faz_conta( valor );
			}
		}
	}
}

</script>
	<table id="grid">
		<tr>
			<td></td>
			<td>Data</td>
			<td>Histórico</td>
			<td>Nº do Cheque</td>
			<td>Tipo</td>
			<td>Valor</td>
		</tr>             
		<tr>
			<td><input type="checkbox" name="lc1" id="lc1" value="150,00" /></td>
			<td>17/05/2010</td>
			<td>testefsdf445465465654</td>
			<td>000000001</td>
			<td>C</td>
			<td id="nc1">150,00</td>
		</tr>
		<tr bgcolor="#D9F9EF">
			<td><input type="checkbox" name="lc2" id="lc2" value="10,00" /></td>
			<td>17/05/2010</td>
			<td>fdsalkjsdfljkdsfalkjfdsalkjfaslkj</td>
			<td>111000</td>
			<td>C</td>
			<td id="nc2">10,00</td>
		</tr>
	</table>

	<br />
	Saldo no Extrato:<br />
	<input type="text" name="sl" id="s1" value="0" readonly="readonly" size="9" />
	

[João Augusto 0]

Cara é quase isso mais eu não posso usar o value do check, eu precisaria pegar da tela o conteúdo da coluna valor, teria como? Ou colocar algum outro dado para pegar o valor dos que estão sendo marcados.

[William Bruno 1501]

ai vejo 2 possibilidades:

 

-> tentar uma gambiarra, e fazer apartir dos IDs

-> percorrer o DOM da tabela, com parent child e afins.

 

dá uma pesquisada nisso que falei, e tenta fazer.. o ponta pé está dado.

[João Augusto 0]

Eu pensei em usar o innerHTML, pk o número de id´s dos <td> é sequencial e igual a os do checkbox.

Pensei em alguma coisa como;

Fazer um loop verificando a repetição dos id´s

verificava quem havia marcado o check

se marcou soma no total

se não

não somaria ou subitrai caso tenha sido marcado

 

Haveria possibilidade disso?

[William Bruno 1501]

talvez, mas vai ser mais dificil não acha ?

[João Augusto 0]

É porque eu não consegui encontrar material de pesquisa sobre o parent child e não o conheço,você vê alguma forma mais simples de fazer isso?

Vlw...

[William Bruno 1501]

mais simples ainda ? jQuery ? porém se você não tem conhecimento em javascript, acho por demais arriscado, já partir para um framework.

 

aqui tem um material bem interessante:

http://www.quirksmode.org/dom/intro.html

[João Augusto 0]

Eu consegui fazer ele pegar o valor da tela mais. Porém ele não deixou selecionar o checkbox, mesmo colocando o onclick nele. Teria algum jeito de funcionar assim?Somando e subitraindo selecionando o check com esse estilo?

 

<script type="text/javascript">
function kk(el){
document.getElementById('aa').value=el.cells[1].innerHTML;
document.getElementById('bb').value=el.cells[2].innerHTML;
return false;
}

</script>	

<table border="1">
<tr onclick="return kk(this);">
  <td><input type="checkbox" /></td>
<td>nome</td>
<td>10</td>
</tr>
<tr onclick="return kk(this);">
  <td> </td>
<td>nome2</td>
<td>12</td>
</tr>
</table>


Name:<input type="text" id="aa" /> Num:<input type="text" id="bb" />

Cara, tentei, tentei e não consegui encontrar uma solução pro meu problema....

Tem como você me ajudar?

Vlw...

 

Consegui em termos só que faltam alguns ajustes que não sei como fazer. Eu tenho que usar o parseFloat para passar de string para valor e fazer com que ele não use somente o id="nc1", mais todos os que forem gerados. Pois os id´s vão ser gerados em sequência numérica; nc1,nc2,nc3.......

 

<script type="text/javascript">
function id( el ){
        return document.getElementById( el );
}
function faz_conta( valor )
{
        id('s1').value = parseFloat( id('s1').value ) + parseFloat( valor );
}
window.onload = function()
{
        var inputs = id('grid').getElementsByTagName('input');
        for( var i=0; i<inputs.length; i++ )
        {
                if( inputs[i].type=='checkbox' )
                {
                        inputs[i].onclick = function ()
                        {
                                valor = document.getElementById('nc1').innerHTML= parseFloat();
                                var valor = this.checked ? valor : -1*valor;
                                
                                faz_conta( valor );
                        }
                }
        }
}

</script>

[William Bruno 1501]

Cara, não era 'dificil'.. veja continuando a implementação que propus, bastava você usar DOM..

 

a implementação, para pegar o valor da TD, em vez de pegar do value do input, ficou:

var tds = this.parentNode.parentNode.getElementsByTagName('td');
var valor = tds[5].innerHTML.replace(',','.');

no lugar de:

valor = this.value.replace(',','.');

<script type="text/javascript">
function id( el ){
	return document.getElementById( el );
}
function faz_conta( valor )
{
	id('s1').value = parseFloat( id('s1').value ) + parseFloat( valor );
}
window.onload = function()
{
	var inputs = id('grid').getElementsByTagName('input');
	for( var i=0; i<inputs.length; i++ )
	{
		if( inputs[i].type=='checkbox' )
		{
			inputs[i].onclick = function()
			{				
				var tds = this.parentNode.parentNode.getElementsByTagName('td');
				var valor = tds[5].innerHTML.replace(',','.');
				
				var valor = this.checked ? valor : -1*valor;

				faz_conta( valor );
			}
		}
	}
}

</script>
	<table id="grid">
		<tr>
			<td></td>
			<td>Data</td>
			<td>Histórico</td>
			<td>Nº do Cheque</td>
			<td>Tipo</td>
			<td>Valor</td>
		</tr>             
		<tr>
			<td><input type="checkbox" name="lc1" value="valor do check1" /></td>
			<td>17/05/2010</td>
			<td>testefsdf445465465654</td>
			<td>000000001</td>
			<td>C</td>
			<td>150,00</td>
		</tr>
		<tr bgcolor="#D9F9EF">
			<td><input type="checkbox" name="lc2" value="valor do check2" /></td>
			<td>17/05/2010</td>
			<td>fdsalkjsdfljkdsfalkjfdsalkjfaslkj</td>
			<td>111000</td>
			<td>C</td>
			<td>10,00</td>
		</tr>
	</table>

	<br />
	Saldo no Extrato:<br />
	<input type="text" name="sl" id="s1" value="0" readonly="readonly" size="9" />

^_^

[João Augusto 0]

Cara simplismente sensacional!

Funcionou belezinha....

Eu só fiz algumas pequenas alterações nela pk pra manter o padrão eu coloquei para aparecer na tela o valor com 2 digitos.

E fiz uma pequena comparação do tipo pra saber se era débito ou crédito.

Mais muito obrigado pela ajuda foi de grande valia aprendi mt com esse script...

Segue ele alterado...

Vlw....

 

function id( el ){
        return document.getElementById( el );
}
function faz_conta( valor )
{
        var number = Number( parseFloat( id('s1').value.replace(',','.') ) + parseFloat( valor ) ).toFixed(2);
		var linha = number.toString();
		id('s1').value = linha.replace('.',',');
}

function conta ()
{
        var inputs = id('grid').getElementsByTagName('input');
        for( var i=0; i<inputs.length; i++ )
        {
                if( inputs[i].type=='checkbox' )
                {
                        inputs[i].onclick = function()
                        {                               
                                var tds = this.parentNode.parentNode.getElementsByTagName('td');
								var tp = tds[4].innerHTML;
								var valor = tds[5].innerHTML.replace(',','.');
                                	
									if (tp == "D"){
                                			 valor = this.checked ? valor : -1*valor;
									}
									if (tp == "C"){
											 valor = this.checked ? -valor : valor;
									}
									
                                faz_conta( valor );
                        }
                }
        }
}