Jump to content
  • 0
Felper

Alterar background-color das células através das ids usando Javascript

Question

Estou tentando alterar a cor de fundo de uma célula, porém está dando o seguinte erro: Uncaught TypeError: Cannot read property 'style' of null .

Segue abaixo o meu código:

 

function criarTabela(){
    // vamos criar o elemento HTML table
    var tabela = document.createElement("table");
    tabela.border = "1px";
    tabela.cellSpacing = "0px";
    tabela.cellPadding = "3px";
 
    // vamos criar o corpo da tabela, ou seja, o tbody 
    var corpo = document.createElement("tbody");
    tabela.appendChild(corpo);
     
    // vamos criar três linhas contendo quatro células cada uma
    for(var i = 0; i < 151; i++){
      var linha = corpo.insertRow(-1);
       
      for(var j = 0; j < 5; j++){
         var celula = linha.insertCell(-1);
         
         celula.setAttribute("id", "lin"+i+"col"+j);
      }
    }
 
    // vamos anexar a tabela recém-criada a um elemento div
    var container = document.getElementById("container");
    container.appendChild(tabela);
  }  

cria.addEventListener('click', criarTabela);

let lin1col0 = document.getElementById('lin1col0');
let lin2col0 = document.getElementById('lin2col0');
let lin3col0 = document.getElementById('lin3col0');
let lin4col0 = document.getElementById('lin4col0');
let lin5col0 = document.getElementById('lin5col0');

let num = 1;

switch(num){
  case 1:
  lin1col0.style.backgroundColor = "red";
  break;
  case 2:
  lin2col0.style.backgroundColor ="red";
  break;
  case 3:
  lin3col0.style.backgroundColor = "red";
  break;
  case 4:
  lin4col0.style.backgroundColor = "red";
  break;
  case 5:
  lin5col0.style.backgroundColor = "red";
  break;
  default:
  alert("Erro!");
}

 

Share this post


Link to post
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Wanderson Moreira
      Bom dia,
      alguém pode me ajudar com uma situação?
      estou utilizando um script pra fazer o carregamento assíncrono do site.
      var links = document.querySelectorAll('a'); function handleClick(event) { event.preventDefault(); fetchPage(event.target.href); window.history.pushState(null, null, event.target.href); window.scrollTo(0, 0); } async function fetchPage(url) { document.querySelector('.content'); var pageResponse = await fetch(url); var pageText = await pageResponse.text(); replaceContent(pageText); } function replaceContent(newText) { var newHtml = document.createElement('div'); newHtml.innerHTML = newText; var oldContent = document.querySelector('.content'); var newContent = newHtml.querySelector('.content'); oldContent.innerHTML = newContent.innerHTML; document.title = newHtml.querySelector('title').innerText; } window.addEventListener('popstate', () => { fetchPage(window.location.href); }) links.forEach(link => { link.addEventListener('click', handleClick); }) O problema em questão é que, o conteúdo da pagina que é carregado dentro da div content não funciona corretamente
       
      os scripts em javascript não são executados;
      os links de navegação da pagina não funcionam de maneira assincrona, diferente dos links de navegação do menu
       
       
    • By Jack Oliveira
      Ola pessoal eu gostaria de saber se teria como e se sim, como fazer para pegar lat e lng quando fazer a busca do endereco pelo cep,
      Tentei buscar uns exemplos de como poderia ser feito, porem não obtive resultado que precisava.
       
      o código a baixo ele funciona sem problema, porem so precisaria pegar esta LAT e LNG 
       
       
      //Buscando endereco plo CEP function limpa_formulário_cep() { //Limpa valores do formulário de cep. document.getElementById('rua').value=(""); document.getElementById('bairro').value=(""); document.getElementById('cidade').value=(""); document.getElementById('uf').value=(""); } function meu_callback(conteudo) { if (!("erro" in conteudo)) { //Atualiza os campos com os valores. document.getElementById('rua').value=(conteudo.logradouro); document.getElementById('bairro').value=(conteudo.bairro); document.getElementById('cidade').value=(conteudo.localidade); document.getElementById('uf').value=(conteudo.uf); } //end if. else { //CEP não Encontrado. limpa_formulário_cep(); alert("CEP não encontrado."); } } function pesquisacep(valor) { //Nova variável "cep" somente com dígitos. var cep = valor.replace(/\D/g, ''); //Verifica se campo cep possui valor informado. if (cep != "") { //Expressão regular para validar o CEP. var validacep = /^[0-9]{8}$/; //Valida o formato do CEP. if(validacep.test(cep)) { document.getElementById('cep').value = cep.substring(0,5) +"-" +cep.substring(5); //Preenche os campos com "..." enquanto consulta webservice. document.getElementById('rua').value="..."; document.getElementById('bairro').value="..."; document.getElementById('cidade').value="..."; document.getElementById('uf').value="..."; //Cria um elemento javascript. var script = document.createElement('script'); //Sincroniza com o callback. script.src = 'https://viacep.com.br/ws/'+ cep + '/json/?callback=meu_callback'; //Insere script no documento e carrega o conteúdo. document.body.appendChild(script); } //end if. else { //cep é inválido. limpa_formulário_cep(); alert("Formato de CEP inválido."); } } //end if. else { //cep sem valor, limpa formulário. limpa_formulário_cep(); } }; </script>  
      <?php // Map($Width, $Height, $StringNome, $StringEndereco, $StringCidade) $LAT = '37.86926'; $LNG = '-122.254811'; ?> <script> // gmap for street view panorama = GMaps.createPanorama({ el: '#MapCanvasStreet', lat : <?= $LAT; ?>, lng : <?= $LNG; ?>, }); </script> Desde já fico grato!!
    • By Jack Oliveira
      Ola pessoal montando um limitador a ser selecionado no SELECT OPTION ele ate faz a contagem  certo etc...
       
      porem não estou conseguindo fazer esta contagem continuar pois ja esta cadastrado no banco o maximo permetido
       
      <div class="col-md-6"> <div class="form-group"> <label>Categorias: </label> <select class="form-control select2" name="categorias[]" id="SelecionaQtdOption" multiple="multiple" data-placeholder="<?php echo $txt['todos_os_mods']; ?>"> <option value="">Selecionar Categorias</option> <?php foreach($categorias as $categoria){ if(strpos($Dados['categorias'], $categoria['titulo']) !== false){ ?> <option selected value="<?= $categoria['titulo']; ?>"><?= $categoria['titulo']; ?></option> <?php } else { ?> <option value="<?= $categoria['titulo']; ?>"><?= $categoria['titulo']; ?></option> <?php } } ?> </select> </div> </div> java esta desta forma
      <?php $QtdCategoria = 3; ?> <script type="text/javascript"> $(document).ready(function() { var selecionarOpiton = null; $('#SelecionaQtdOption').change(function(event) { if ($(this).val().length == <?= $QtdCategoria; ?>) { //Limitar Quantidade de categoria a ser selecionanda no select Option $(this).val(selecionarOpiton); } else { selecionarOpiton = $(this).val(); } }); }); </script>  
    • By gersonab
      Bom dia a todos, preciso aplicar duas máscaras em uma janela modal, não estou conseguindo fazer, fora dela as mascaras funcionam.
      <div class="form-group col-md-4"> <label>Data pagamento</label> <input type="text" name="dataval" class="form-control" id="dataapp"> </div> <div class="form-group col-md-4"> <label>Valor</label> <input type="text" name="valpro" class="form-control" id="money"> </div> utilizo este plugin
      <script src="../plugins/input-mask/jquery.inputmask.bundle.min.js"></script> $("#money").inputmask("999,999,999.999"); $("#dataapp").inputmask("99/99/9999"); desde já agradeço qq ajuda
    • By Jack Oliveira
      Ola pessoal tava procurando um modo de eu montar algo dessa forma com css e html
      que seja usado cores rgb ou um bg de fundo, poderia ser ambos tbm.
      porem que ambos ficassem tando pra direita, esquerda e centro, neste caso ficara a escolha da pessoa da forma que quer que fique
      montei o exemplo no editor de imagem apenas para ver como que preciso, porem que fiquem alinhando srrs. Sobre o tamanho e a largura que pudesse ajustar conforme for a necessidade tbm sem que 
      fique sem qualidade..
       

       
      Desde já fico grato
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.