Alterar background de uma table

lcamara · Junho 30, 2010

Olá...

Alguém sabe se é possível uma fução js alterar a propriedade background de uma table???????

E se for possível, como fazer...

Grato,

William Bruno · Junho 30, 2010

sim,é possível..

acesse primeiro a propriedade .style e depois a propriedade css que você quer...

algo como:

elemento.style.backgroundColor = '#f00';

lcamara · Julho 5, 2010

Não tá fucionando...

function Seleciona(vlr)

{

if (vlr == 'A')

{

tblOperacao.style.background = 'imagens/caixaLogin_I.png';

tblAdmin.style.background = 'imagens/caixaLogin_A.png';

}

if (vlr == 'O')

{

tblOperacao.style.background = 'imagens/caixaLogin_A.png';

tblAdmin.style.background = 'imagens/caixaLogin_I.png';

}

Na tblOperacao tenho um form com os campos USUARIO / SENHA e o botão ACESSAR.

Na tblAdmin tenho um form com os campos USUARIO / SENHA e o botão ACESSAR.

Quando o foco (onFocus) está em um dos campo ou no botão da tblOperacao, eu chamo Seleciona('O').

Quando o foco (onFocus) está em um dos campo ou no botão da tblAdmin, eu chamo Seleciona('A').

gRoOvE · Julho 10, 2010

Primeiro você deve selecionar o elemento que deseja alterar:

document.getElementById("").style.backgroundColor = "#f00";

Dúvida: caso queria alterar a cor de fundo de todas as tabelas da página, posso selecionar com um document.getElementsByTagName(), porém não posso alterar a cor de fundo assim:

document.getElementsByTagName("table").style.backgroundColor = "#f00";

Isso ocorre por que estou alterando diretamente no html? Deveria utilizar bgcolor? Como fazer neste caso? Imagem Postada

William Bruno · Julho 11, 2010

Dúvida: caso queria alterar a cor de fundo de todas as tabelas da página, posso selecionar com um document.getElementsByTagName(), porém não posso alterar a cor de fundo assim:
document.getElementsByTagName("table").style.backgroundColor = "#f00";
Isso ocorre por que estou alterando diretamente no html?

Não, isso acontece, pq getElementsByTagName() te devolve um array ! itere por esse array, mudando posição por posição, ou seja, elemento por elemento dele.

pesquise sobre o computedStyle() o javascript sempre vai agir nele.

gRoOvE · Julho 12, 2010

Mesmo navegando pelo array do getElementsByTagName(), ocorre o seguinte erro:

document.getElementsByTagName("table")[0].style.backgroundColor = '#ffcccc';

document.getElementsByTagName("table").style is undefined

Bom, consegui resolver declarando style in-line na tag table.

Dúvida: sempre que for alterar uma formatação CSS pelo javascript, devo declarar a mesma antes? Não posso simplesmente "criar" a formatação a partir de javascript?

William Bruno · Julho 12, 2010

@gRoOvE se você tiver dúvidas, abra um tópico seu, e pergunte.

Não invada o tópico de outras pessoas, para 'aproveitar' e tirar as suas dúvidas, pois qndo faz isso, acabamos desviando o assunto do mesmo.

Mostre o teu HTML lcamara

lcamara · Agosto 5, 2010

William Bruno, desculpe a demora:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html><head><title>Acesso ao Sistema</title>
<link href="estilos/corpo.css" type=text/css rel=stylesheet>
<script language="javascript">
function foco()
{
	document.forms[0].usuario.focus();
}
function Seleciona(vlr)
{
	if (vlr == 'A')
	{
		tblMesa.style.background = 'imagens/caixaLogin_I.png';
		tblAdmin.style.background = 'imagens/caixaLogin_A.png';
	}
	if (vlr == 'M')
	{
		tblMesa.style.background = 'imagens/caixaLogin_A.png';
		tblAdmin.style.background = 'imagens/caixaLogin_I.png';
	}
}
</script></head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" onLoad="foco()">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%" bgcolor="">
	<tr>
		<td colspan="3" width="100%" height="50%"> </td>
	</tr>
	<tr>
		<td width="48%" height="30" align="right">
			<form method="POST" action="logar.asp" id="1">
				<table id="tblMesa" border="0" cellpadding="0" cellspacing="0" width="254" height="100" background="imagens/caixaLogin_I.png">
					<tr>
						<td colspan="2" height="25" class="Grupo">Mesa</td>
					</tr>
					<tr>
						<td width="" height="20" align="right" class="Caption">Usuário :</td>
						<td width=""> <input type="text" name="usuario" size="20" maxlength="20" class="CampoTextoOB" onFocus="Seleciona('M')"></td>
					</tr>
					<tr>
						<td width="" height="20" align="right" class="Caption">Senha :</td>
						<td width=""> <input type="password" name="senha" size="20" maxlength="20" class="CampoTextoOB" onFocus="Seleciona('M')"></td>
					</tr>
					<tr>
						<td width="100%" height="25" colspan="2" align="center"><input type="submit" value="Acessar" name="B1" class="Botao" onFocus="Seleciona('M')"></td>
					</tr>
					<tr>
						<td width="100%" height="10" colspan="2" align="center"></td>
					</tr>
				</table>
			</form>
		</td>
		<td width="15" height="30"> </td>
		<td width="48%" height="30" align="left">
			<form method="POST" action="Admin/logar.asp" id="2">
				<table id="tblAdmin" border="0" cellpadding="0" cellspacing="0" width="254" height="100" background="imagens/caixaLogin_I.png">
					<tr>
						<td colspan="2" height="25" class="Grupo">Sistema de Controle</td>
					</tr>
					<tr>
						<td width="" height="20" align="right" class="Caption">Usuário :</td>
						<td width=""> <input type="text" name="usuario" size="20" maxlength="20" class="CampoTextoOB" onFocus="Seleciona('A')"></td>
					</tr>
					<tr>
						<td width="" height="20" align="right" class="Caption">Senha :</td>
						<td width=""> <input type="password" name="senha" size="20" maxlength="20" class="CampoTextoOB" onFocus="Seleciona('A')"></td>
					</tr>
					<tr>
						<td width="100%" height="25" colspan="2" align="center"><input type="submit" value="Acessar" name="B1" class="Botao" onFocus="Seleciona('A')"></td>
					</tr>
					<tr>
						<td width="100%" height="10" colspan="2" align="center"></td>
					</tr>
				</table>
			</form>
		</td>
	</tr>
	<tr>
		<td colspan="3" width="100%" height="50%"> </td>
	</tr>
</table>
</body></html>

William Bruno · Agosto 5, 2010

tá.. primeiro arrume as tabelas:

<table id="tblAdmin" border="0" cellpadding="0" cellspacing="0" width="254" height="100" style="background: url('imagens/caixaLogin_I.png')">

e

<table id="tblMesa" border="0" cellpadding="0" cellspacing="0" width="254" height="100" style="background: url('imagens/caixaLogin_I.png')">

veja que use css inline para definir os backgrounds..

agora, manipulando corretamente o javascript:

function Seleciona(vlr)
{
	var tblMesa = document.getElementById('tblMesa');
	var tblAdmin = document.getElementById('tblAdmin');
	if (vlr == 'A')
	{
		tblMesa.style.background = "url('imagens/caixaLogin_I.png')";
		tblAdmin.style.background = "url('imagens/caixaLogin_A.png')";
	}
	else if(vlr == 'M')
	{
		tblMesa.style.background = "url('imagens/caixaLogin_A.png')";
		tblAdmin.style.background = "url('imagens/caixaLogin_I.png')";
	}
}

veja que novamente, já que estamos acessando a propriedade .style, precisamos mexer no css

Annes · Agosto 5, 2010

William Bruno,

Desculpe "aproveitar" o espaço do colega Icamara para tirar uma dúvida, mas acredito que, como eu, Icamara tbm poderá ter a mesma dúvida. Caso você não queira responder aqui, colocarei a pergunta no meu tópico também, mas acredito que a dúvida casa aqui também, e por isso coloquei-a aqui, e não no meu:

você fala que é necessário utilizar CSS inline. Mas no caso de uma página que possui uma folha de estilo externa, ainda assim é necessário usar o CSS inline, ou o mesmo poderá ir no CSS externo? Outra coisa: no caso de não poder usar o CSS externo, o uso concomitante dos dois não criará conflito?

Grata,

Annes

William Bruno · Agosto 5, 2010

Acontece o seguinte:

-> javascript não lê css externo naturamente (da tag <style> ou de folhas externas),(existem formas de fazer isso, mas é um baita trabalho).

a propriedade .style, só acessa o CSS que estiver explicitamente declarado como inline no elemento.. ou tiver sido criado como javascript

pois javascript, para possuir maior especificidade, adiciona oque você mandar, de forma inline.

Exemplificando isso:

uma tag:

<div id="teste">

ao aplicar:

document.getElementById('teste').style.color = '#f00';

vai ficar:

<div id="teste" style="color: #f00;">

ou seja, inline. Essa mudança você não conseguirá ver no Código Fonte HTML, pois ela foi gerada após o browser terminar de processar o documento.

Com Ferramentas como o FireBug, você consegue ver isso acontecendo.

existe o método getComputedStyle(), que é a forma 'mais fácil' de ler css que não seja inline, pois ele vai pegar oque está computado na tag, em vez de tentar ir ler a folha, ou oq tá declarado no style..

nesse caso de vcs 2, nada disso é necessario, e vcs nem precisam se preocupar. Mas já que você perguntou, tentei falar aqui sobre.

Arquivado

Alterar background de uma table

Recommended Posts

lcamara 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

lcamara 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gRoOvE 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

gRoOvE 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

lcamara 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Annes 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

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

Fóruns

Tempo Real

Informação importante