Inserir imagem em tabela Dom

Julizin Ferreira · Setembro 25, 2014

Olá galera estou fazendo uma tabela interativa com DOM simples para trabalho da facul para entregar amanhã, criei um form com os select fazendo referência com cada ação que eu quero (texto,senha,radio,etc..) , mas no último case(roupa) eu queria inserir uma Imagem , porém já tentei de diversas formas mas não to conseguindo fazer a referência correta para ele aparecer na tela quando eu selecionar esse case. Tentei algo do tipo :

Script :

		case "rpa": 
                   var img = document.createElement("IMG");  
                   img.src = "img/roupas/capacete.png";  
                   document.getElementById('image').appendChild(img);  
	            break;

Html :

<form id="frmIncluir" method="post" action="">
  <p>Campo de formulário: 
    <select name="base_campo" id="base_campo">
      <option value="txt">Texto</option>
      <option value="pwd">Senha</option>
      <option value="rad">Radio</option>
      <option value="chk">Checkbox</option>
      <option value="btn">Botão</option>
      <option value="rpa">Roupa</option>
    </select>
    <br />
  Nome: 
  <input type="text" name="base_nome" id="base_nome" />
  <br />
  ID:
  <input type="text" name="base_id" id="base_id" />
  <br />
  <input type="button" name="btnAcrescenta" id="btnAcrescenta" value="acrescenta"  onclick="inclui();" />
  </p>
</form>
<form id="frmDom" method="post" action="">
</form>

Código completo :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM</title>
<script type="text/javascript">

function inclui(){

	//Recuperando as informações
	// que serão usadas no novo campo
	var oRotulo = document.getElementById("base_nome").value;
	var oId = document.getElementById("base_id").value;
	var oTipo_obj = document.getElementById("base_campo");
	aOpcao = oTipo_obj.value;
	
	//Verificando a existência do ID
	if (document.getElementById(oId)) {
		alert("O ID já existe no formulário");
		return false;
	}
	
	
	// Recuperando o formulário inferior
	var frm = document.getElementById("frmDom");

	if (aOpcao != "btn")	{
		//criando a parte do rótulo
		//
		var lbl = document.createElement("label");
		// criando um atributo
		lbl.setAttribute("for", oId);
		// criando texto do elemento
		txtNode = document.createTextNode(oRotulo + " : ");
		// adicionando o texto no elemento
		lbl.appendChild(txtNode);
			
		//Adicionando o label
		frm.appendChild(lbl);
	}
	
	var campo;
	
	switch(aOpcao){
		case "txt":
				campo = document.createElement("input");
				campo.setAttribute("type", "text");
				campo.setAttribute("id", oId);
				campo.setAttribute("name", oId);
				break;

		case "pwd":
				campo = document.createElement("input");
				campo.setAttribute("type", "password");
				campo.setAttribute("id", oId);
				campo.setAttribute("name", oId);
				break;

		case "rad":
				campo = document.createElement("input");
				campo.setAttribute("type", "radio");
				campo.setAttribute("name", oId);
				var maior = 0;
				
				// recupera todos os radios com o mesmo nome:
				var campos = document.getElementsByTagName("input");
				for (i=0; i<campos.length;i++){
					// testando para pegar o último número
					var radioAtu =campos.item(i);
					var radioName = radioAtu.getAttribute("name");
					var radioId = radioAtu.getAttribute("id");
					var radiotipo = radioAtu.getAttribute("type");
					
					// Verifica se é do tipo radio e 
					// pertence ao mesmo grupo
					if (
						(radioName == oId)
						&&
						(radiotipo == "radio")
						 ){
					
						var tam = oId.length;
						radioNum = parseInt(radioId.substring(tam));
						if( isNaN(radioNum ))
							radioNum = 0;
						
						//Verifica se o nome é igual aoa informado
						// e se seu valor é o maior
						if (radioNum > maior){
							maior = radioNum;
						}
					}
				}
				//Próximo
				maior++
			
				//Criando o atributo com id diferente
				campo.setAttribute("id", oId + "" + maior);
				
				// colocado para testar o que ocorre
				// Pode usar isso nos estudos, bastando alterar
				// a função testa
//				campo.setAttribute("onclick", "testa(this);");
				
				break;

		case "chk":
				campo = document.createElement("input");
				campo.setAttribute("type", "checkbox");
				campo.setAttribute("id", oId);
				campo.setAttribute("name", oId);
				break;

		case "btn":
				campo = document.createElement("input");
				campo.setAttribute("type", "button");
				campo.setAttribute("id", oId);
				campo.setAttribute("name", oId);
				campo.setAttribute("value", oRotulo);
				break;
				
		case "rpa": 
                   var img = document.createElement("IMG");  
                   img.src = "img/roupas/capacete.png";  
                   document.getElementById('image').appendChild(img);  
	            break;
				break;
	}
	//Adicionando o campo
	frm.appendChild(campo);
	//Adicionando a quebra de linha
	br = document.createElement("br");
	frm.appendChild(br);
	
}
</script>
<script>
function testa(campo){
	alert(campo.getAttribute("id"));
}
</script>
</head>

<body>
<h1>DOM</h1>
<h2>Criando formulários </h2>
<form id="frmIncluir" method="post" action="">
  <p>Campo de formulário: 
    <select name="base_campo" id="base_campo">
      <option value="txt">Texto</option>
      <option value="pwd">Senha</option>
      <option value="rad">Radio</option>
      <option value="chk">Checkbox</option>
      <option value="btn">Botão</option>
      <option value="rpa">Roupa</option>
    </select>
    <br />
  Nome: 
  <input type="text" name="base_nome" id="base_nome" />
  <br />
  ID:
  <input type="text" name="base_id" id="base_id" />
  <br />
  <input type="button" name="btnAcrescenta" id="btnAcrescenta" value="acrescenta"  onclick="inclui();" />
  </p>
</form>
<form id="frmDom" method="post" action="">
</form>
<p>&nbsp;</p>
</body>
</html>

Se alguém puder me ajudar, preciso urgente :( :D agradeço !

Entrar

Inserir imagem em tabela Dom

Pergunta

Julizin Ferreira

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades