Jump to content
Sapinn

Como mudar a cor de um campo quando clicar nele

Recommended Posts

Eu tenho um form e toda vez que alguém clicar no input eu quero que a borda de baixo mude a cor e quando ele clicar fora quero que volte ao normal quero isso para todos os campo de todos os foms que eu tiver

Share this post


Link to post
Share on other sites

HTML

<form>
    <label>
      <span>Input 1</span>
      <input type="text"/>
    </label>
    <label>
      <span>Input 2</span>
      <input type="text"/>
    </label>
    <label>
      <span>Input 3</span>
      <input type="text"/>
    </label> 
  </form>

CSS

form {
  display: flex;
  flex-direction: column;
}

form label {
  margin: 5px;
}

input {
  outline: none;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

input:focus {
  border-bottom: 1px solid red;
}

JSBin: https://jsbin.com/vewuwerolo/edit?html,css,output

Share this post


Link to post
Share on other sites

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 Rodrigo Biaggio
      Pessoal, alguém consegue me ajudar? Eu preciso pegar os dados de um array, mas não estou conseguindo. 
       
      <!DOCTYPE html> <!-- Inicio do html --> <html lang="pt"> <!-- Inicio do head --> <head> <meta charset="utf-8"> <script src='https://kit.fontawesome.com/a076d05399.js'></script> <link rel="icon" type="imagem/png" href="images/dynatrace.png" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://unpkg.com/@popperjs/core@2"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- CSS Customizado --> <link href="css/ambiente-monitorado.css" rel="stylesheet"> </head> <!-- Fim do head --> <!-- Inicio do body --> <body> <header> <title>Dynatrace Managed</title> <!-- Inicio do nav fixado no topo--> <div id="nav"> <nav class="navbar navbar-inverse navbar-fixed-top"> <!-- Inicio div container-fluid --> <div class="container-fluid"> <div class="navbar-header"> <!-- Imagem do logo da Dynatrace a esquerda --> <a class="navbar-brand" href="#"><img id="imagem-logo-dynatrace" src="images/dynatrace.png" width="30px" height="30px" alt="Logo Principal" title="Logo Dynatrace"></a> </div> <!-- Inicio ul nav com opções das páginas --> <ul class="nav navbar-nav nav-custom"> <li><a href="index.html">Home</a></li> <li class="active"><a href="ambiente-monitorado.html">Ambientes Monitorados</a> <li><a href="arquitetura.html">Arquitetura Dynatrace</a></li> <li><a href="#">Downtime</a></li> <li><a href="#">Indicadores</a></li> <li><a href="como-funciona.html">Licenças</a></li> <li><a href="#">Métricas</a></li> </ul> <!-- Fim ul nav com opções das páginas --> <!-- Inicio ul nav da diretia, com search e login --> <ul class="nav navbar-nav navbar-right nav-custom"> <!-- Icone e botão login --> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> <!-- Inicio form do search --> <form class="navbar-form navbar-left" action="/action_page.php"> <div class="input-group"> <!-- Input do search --> <input type="text" class="form-control" placeholder="Search" name="search"> <div class="input-group-btn"> <!-- Botão de submit do search --> <button class="btn btn-default" type="submit"> <!-- Icone do search --> <i class="glyphicon glyphicon-search"></i> </button> </div> <!-- Fim div input-group-btn --> </div> <!-- Fim div input-group --> </form> <!-- Fim form do search --> </ul> <!-- Fim ul nav da diretia, com search e login --> </div> <!-- Fim div container-fluid --> </nav> </div> <!-- Fim do nav fixado no topo--> </header> <div id="div-main"> <div id="div-botoes-pesquisa"> <button class="button-title btn btn-info" id="button-buscar-licencas-ambiente" data-toggle="tooltip" aria-pressed="false"><i class="fas fa-bezier-curve fa-2x" aria-hidden="true" title="Por Ambiente"></i></button> <button class="button-title btn btn-info" id="button-buscar-licencas-servidor"><i class="fas fa-server fa-2x" aria-hidden="true" title="Por Servidor"></i></button><br><br> <input class="form-control mr-sm-2" type="text" id="input-search-host-group" name="filtro" placeholder="Filtrar"> </div> <div id="div-mostra-total-licencas"></div> <div id="div-table-licencas" class="div-table-licencas table-responsive"> <table class="table table-striped table-hover table-bordered" id="table-licencas"> <thead> <tr> <th class="linha-titulo-tabela">Problema</th> <th class="linha-titulo-tabela">Camada Impactada</th> <th class="linha-titulo-tabela">Status</th> <th class="linha-titulo-tabela">Tipo Erro</th> <th class="linha-titulo-tabela">Usuários Impactados</th> </tr> </thead> <tbody id="table-body"> </tbody> </table> </div> <div id="demo"></div> </div> <script src="js/api-get-problems.js"></script> <script src="js/disable-button.js"></script> <script src="js/filtrar-search-licencas.js"></script> </body> <!-- Fim do body --> </html> <!-- Fim do html --> $(document).ready(function() { const Url=''; $("#button-buscar-licencas-ambiente").click(function(){ $.ajax({ url: Url, type:"GET", success: function(result){ console.log(result); var problema = result.problems; var userimpactado = result.problems.impactAnalysis; $.each(problema, function(i, value) { console.log('The value at arr[' + i + '] is: ' + value.displayId); var newRow = $('<tr class="linha-table">'); var cols = ""; cols += '<td class="displayId" id="displayId">' + value.displayId + '</td>'; cols += '<td class="impactLevel" id="impactLevel">' + value.impactLevel + '</td>'; cols += '<td class="status" id="status">' + value.status + '</td>'; cols += '<td class="title" id="title">' + value.title + '</td>'; cols += '<td class="estimatedAffectedUsers" id="estimatedAffectedUsers">' + value.impactAnalysis.impacts.estimatedAffectedUsers + '</td>'; newRow.append(cols); $("#table-licencas").append(newRow); }); }, error:function(error){ console.log('Error ${error}') } }); }); }); Preciso pegar as informações dos campos 
      estimatedAffectedUsers:  numberOfPotentiallyAffectedServiceCalls:    Cada value.displayId pode ter 1 ou mais impactedEntity.   impactAnalysis: {
      impacts: [
      {
      impactType: "SERVICE",
      impactedEntity: {
      entityId: {
      id: "SERVICE-034769111916BA3B",
      type: "SERVICE"
      },
      name: ""
      },
      estimatedAffectedUsers: 0,
      numberOfPotentiallyAffectedServiceCalls: 4496
      },
      {
      impactType: "APPLICATION",
      impactedEntity: {
      entityId: {
      id: "APPLICATION-A8D06FDBBA2EE7F6",
      type: "APPLICATION"
      },
      name: ""
      },
      estimatedAffectedUsers: 2
      },
      {
      impactType: "SERVICE",
      impactedEntity: {
      entityId: {
      id: "SERVICE-B7A98E7FDD81118A",
      type: "SERVICE"
      },
      name: "online-importer-server-v*"
      },
      estimatedAffectedUsers: 0,
      numberOfPotentiallyAffectedServiceCalls: 775
      },
      {
      impactType: "SERVICE",
      impactedEntity: {
      entityId: {
      id: "SERVICE-D773255CD13D8968",
      type: "SERVICE"
      },
      name: ""
      },
      estimatedAffectedUsers: 1,
      numberOfPotentiallyAffectedServiceCalls: 34
      }
      ]  
    • By Rodrigo Biaggio
      Pessoal, alguém consegue me ajudar? Eu preciso pegar os dados de um array, mas não estou conseguindo. 
       
      <!DOCTYPE html> <!-- Inicio do html --> <html lang="pt"> <!-- Inicio do head --> <head> <meta charset="utf-8"> <script src='https://kit.fontawesome.com/a076d05399.js'></script> <link rel="icon" type="imagem/png" href="images/dynatrace.png" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://unpkg.com/@popperjs/core@2"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- CSS Customizado --> <link href="css/ambiente-monitorado.css" rel="stylesheet"> </head> <!-- Fim do head --> <!-- Inicio do body --> <body> <header> <title>Dynatrace Managed</title> <!-- Inicio do nav fixado no topo--> <div id="nav"> <nav class="navbar navbar-inverse navbar-fixed-top"> <!-- Inicio div container-fluid --> <div class="container-fluid"> <div class="navbar-header"> <!-- Imagem do logo da Dynatrace a esquerda --> <a class="navbar-brand" href="#"><img id="imagem-logo-dynatrace" src="images/dynatrace.png" width="30px" height="30px" alt="Logo Principal" title="Logo Dynatrace"></a> </div> <!-- Inicio ul nav com opções das páginas --> <ul class="nav navbar-nav nav-custom"> <li><a href="index.html">Home</a></li> <li class="active"><a href="ambiente-monitorado.html">Ambientes Monitorados</a> <li><a href="arquitetura.html">Arquitetura Dynatrace</a></li> <li><a href="#">Downtime</a></li> <li><a href="#">Indicadores</a></li> <li><a href="como-funciona.html">Licenças</a></li> <li><a href="#">Métricas</a></li> </ul> <!-- Fim ul nav com opções das páginas --> <!-- Inicio ul nav da diretia, com search e login --> <ul class="nav navbar-nav navbar-right nav-custom"> <!-- Icone e botão login --> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> <!-- Inicio form do search --> <form class="navbar-form navbar-left" action="/action_page.php"> <div class="input-group"> <!-- Input do search --> <input type="text" class="form-control" placeholder="Search" name="search"> <div class="input-group-btn"> <!-- Botão de submit do search --> <button class="btn btn-default" type="submit"> <!-- Icone do search --> <i class="glyphicon glyphicon-search"></i> </button> </div> <!-- Fim div input-group-btn --> </div> <!-- Fim div input-group --> </form> <!-- Fim form do search --> </ul> <!-- Fim ul nav da diretia, com search e login --> </div> <!-- Fim div container-fluid --> </nav> </div> <!-- Fim do nav fixado no topo--> </header> <div id="div-main"> <div id="div-botoes-pesquisa"> <button class="button-title btn btn-info" id="button-buscar-licencas-ambiente" data-toggle="tooltip" aria-pressed="false"><i class="fas fa-bezier-curve fa-2x" aria-hidden="true" title="Por Ambiente"></i></button> <button class="button-title btn btn-info" id="button-buscar-licencas-servidor"><i class="fas fa-server fa-2x" aria-hidden="true" title="Por Servidor"></i></button><br><br> <input class="form-control mr-sm-2" type="text" id="input-search-host-group" name="filtro" placeholder="Filtrar"> </div> <div id="div-mostra-total-licencas"></div> <div id="div-table-licencas" class="div-table-licencas table-responsive"> <table class="table table-striped table-hover table-bordered" id="table-licencas"> <thead> <tr> <th class="linha-titulo-tabela">Problema</th> <th class="linha-titulo-tabela">Camada Impactada</th> <th class="linha-titulo-tabela">Status</th> <th class="linha-titulo-tabela">Tipo Erro</th> <th class="linha-titulo-tabela">Usuários Impactados</th> </tr> </thead> <tbody id="table-body"> </tbody> </table> </div> <div id="demo"></div> </div> <script src="js/api-get-problems.js"></script> <script src="js/disable-button.js"></script> <script src="js/filtrar-search-licencas.js"></script> </body> <!-- Fim do body --> </html> <!-- Fim do html --> $(document).ready(function() { const Url=''; $("#button-buscar-licencas-ambiente").click(function(){ $.ajax({ url: Url, type:"GET", success: function(result){ console.log(result); var problema = result.problems; var userimpactado = result.problems.impactAnalysis; $.each(problema, function(i, value) { console.log('The value at arr[' + i + '] is: ' + value.displayId); var newRow = $('<tr class="linha-table">'); var cols = ""; cols += '<td class="displayId" id="displayId">' + value.displayId + '</td>'; cols += '<td class="impactLevel" id="impactLevel">' + value.impactLevel + '</td>'; cols += '<td class="status" id="status">' + value.status + '</td>'; cols += '<td class="title" id="title">' + value.title + '</td>'; cols += '<td class="estimatedAffectedUsers" id="estimatedAffectedUsers">' + value.impactAnalysis.impacts.estimatedAffectedUsers + '</td>'; newRow.append(cols); $("#table-licencas").append(newRow); }); }, error:function(error){ console.log('Error ${error}') } }); }); }); Preciso pegar as informações dos campos 
      estimatedAffectedUsers: 0, numberOfPotentiallyAffectedServiceCalls: 4496   Cada value.displayId pode ter 1 ou mais impactedEntity.
      impactAnalysis: {
      impacts: [
      {
      impactType: "SERVICE",
      impactedEntity: {
      entityId: {
      id: "SERVICE-034769111916BA3B",
      type: "SERVICE"
      },
      name: "alsb3-soa:80"
      },
      estimatedAffectedUsers: 0,
      numberOfPotentiallyAffectedServiceCalls: 4496
      },
      {
      impactType: "APPLICATION",
      impactedEntity: {
      entityId: {
      id: "APPLICATION-A8D06FDBBA2EE7F6",
      type: "APPLICATION"
      },
      name: "Meu Vivo PJ - Web"
      },
      estimatedAffectedUsers: 2
      },
      {
      impactType: "SERVICE",
      impactedEntity: {
      entityId: {
      id: "SERVICE-B7A98E7FDD81118A",
      type: "SERVICE"
      },
      name: "online-importer-server-v*"
      },
      estimatedAffectedUsers: 0,
      numberOfPotentiallyAffectedServiceCalls: 775
      },
      {
      impactType: "SERVICE",
      impactedEntity: {
      entityId: {
      id: "SERVICE-D773255CD13D8968",
      type: "SERVICE"
      },
      name: "Nginx-WebServer-MeuVivoEmpresas:443"
      },
      estimatedAffectedUsers: 1,
      numberOfPotentiallyAffectedServiceCalls: 34
      }
      ]
    • By Rodrigo Biaggio
      Pessoal, alguém consegue me ajudar? Eu preciso pegar os dados de um array, mas não estou conseguindo. 
       
      <!DOCTYPE html> <!-- Inicio do html --> <html lang="pt"> <!-- Inicio do head --> <head> <meta charset="utf-8"> <script src='https://kit.fontawesome.com/a076d05399.js'></script> <link rel="icon" type="imagem/png" href="images/dynatrace.png" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://unpkg.com/@popperjs/core@2"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- CSS Customizado --> <link href="css/ambiente-monitorado.css" rel="stylesheet"> </head> <!-- Fim do head --> <!-- Inicio do body --> <body> <header> <title>Dynatrace Managed</title> <!-- Inicio do nav fixado no topo--> <div id="nav"> <nav class="navbar navbar-inverse navbar-fixed-top"> <!-- Inicio div container-fluid --> <div class="container-fluid"> <div class="navbar-header"> <!-- Imagem do logo da Dynatrace a esquerda --> <a class="navbar-brand" href="#"><img id="imagem-logo-dynatrace" src="images/dynatrace.png" width="30px" height="30px" alt="Logo Principal" title="Logo Dynatrace"></a> </div> <!-- Inicio ul nav com opções das páginas --> <ul class="nav navbar-nav nav-custom"> <li><a href="index.html">Home</a></li> <li class="active"><a href="ambiente-monitorado.html">Ambientes Monitorados</a> <li><a href="arquitetura.html">Arquitetura Dynatrace</a></li> <li><a href="#">Downtime</a></li> <li><a href="#">Indicadores</a></li> <li><a href="como-funciona.html">Licenças</a></li> <li><a href="#">Métricas</a></li> </ul> <!-- Fim ul nav com opções das páginas --> <!-- Inicio ul nav da diretia, com search e login --> <ul class="nav navbar-nav navbar-right nav-custom"> <!-- Icone e botão login --> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> <!-- Inicio form do search --> <form class="navbar-form navbar-left" action="/action_page.php"> <div class="input-group"> <!-- Input do search --> <input type="text" class="form-control" placeholder="Search" name="search"> <div class="input-group-btn"> <!-- Botão de submit do search --> <button class="btn btn-default" type="submit"> <!-- Icone do search --> <i class="glyphicon glyphicon-search"></i> </button> </div> <!-- Fim div input-group-btn --> </div> <!-- Fim div input-group --> </form> <!-- Fim form do search --> </ul> <!-- Fim ul nav da diretia, com search e login --> </div> <!-- Fim div container-fluid --> </nav> </div> <!-- Fim do nav fixado no topo--> </header> <div id="div-main"> <div id="div-botoes-pesquisa"> <button class="button-title btn btn-info" id="button-buscar-licencas-ambiente" data-toggle="tooltip" aria-pressed="false"><i class="fas fa-bezier-curve fa-2x" aria-hidden="true" title="Por Ambiente"></i></button> <button class="button-title btn btn-info" id="button-buscar-licencas-servidor"><i class="fas fa-server fa-2x" aria-hidden="true" title="Por Servidor"></i></button><br><br> <input class="form-control mr-sm-2" type="text" id="input-search-host-group" name="filtro" placeholder="Filtrar"> </div> <div id="div-mostra-total-licencas"></div> <div id="div-table-licencas" class="div-table-licencas table-responsive"> <table class="table table-striped table-hover table-bordered" id="table-licencas"> <thead> <tr> <th class="linha-titulo-tabela">Problema</th> <th class="linha-titulo-tabela">Camada Impactada</th> <th class="linha-titulo-tabela">Status</th> <th class="linha-titulo-tabela">Tipo Erro</th> <th class="linha-titulo-tabela">Usuários Impactados</th> </tr> </thead> <tbody id="table-body"> </tbody> </table> </div> <div id="demo"></div> </div> <script src="js/api-get-problems.js"></script> <script src="js/disable-button.js"></script> <script src="js/filtrar-search-licencas.js"></script> </body> <!-- Fim do body --> </html> <!-- Fim do html --> $(document).ready(function() { const Url=''; $("#button-buscar-licencas-ambiente").click(function(){ $.ajax({ url: Url, type:"GET", success: function(result){ console.log(result); var problema = result.problems; var userimpactado = result.problems.impactAnalysis; $.each(problema, function(i, value) { console.log('The value at arr[' + i + '] is: ' + value.displayId); var newRow = $('<tr class="linha-table">'); var cols = ""; cols += '<td class="displayId" id="displayId">' + value.displayId + '</td>'; cols += '<td class="impactLevel" id="impactLevel">' + value.impactLevel + '</td>'; cols += '<td class="status" id="status">' + value.status + '</td>'; cols += '<td class="title" id="title">' + value.title + '</td>'; cols += '<td class="estimatedAffectedUsers" id="estimatedAffectedUsers">' + value.impactAnalysis.impacts.estimatedAffectedUsers + '</td>'; newRow.append(cols); $("#table-licencas").append(newRow); }); }, error:function(error){ console.log('Error ${error}') } }); }); }); Preciso pegar as informações dos campos 
      estimatedAffectedUsers: 0, numberOfPotentiallyAffectedServiceCalls: 4496   Cada value.displayId pode ter 1 ou mais impactedEntity.
      impactAnalysis: {
      impacts: [
      {
      impactType: "SERVICE",
      impactedEntity: {
      entityId: {
      id: "SERVICE-034769111916BA3B",
      type: "SERVICE"
      },
      name: "alsb3-soa:80"
      },
      estimatedAffectedUsers: 0,
      numberOfPotentiallyAffectedServiceCalls: 4496
      },
      {
      impactType: "APPLICATION",
      impactedEntity: {
      entityId: {
      id: "APPLICATION-A8D06FDBBA2EE7F6",
      type: "APPLICATION"
      },
      name: "Meu Vivo PJ - Web"
      },
      estimatedAffectedUsers: 2
      },
      {
      impactType: "SERVICE",
      impactedEntity: {
      entityId: {
      id: "SERVICE-B7A98E7FDD81118A",
      type: "SERVICE"
      },
      name: "online-importer-server-v*"
      },
      estimatedAffectedUsers: 0,
      numberOfPotentiallyAffectedServiceCalls: 775
      },
      {
      impactType: "SERVICE",
      impactedEntity: {
      entityId: {
      id: "SERVICE-D773255CD13D8968",
      type: "SERVICE"
      },
      name: "Nginx-WebServer-MeuVivoEmpresas:443"
      },
      estimatedAffectedUsers: 1,
      numberOfPotentiallyAffectedServiceCalls: 34
      }
      ]
    • By Rodrigo Biaggio
      Pessoal, alguém consegue me ajudar? Eu preciso pegar os dados de um array, mas não estou conseguindo. 
       
      <!DOCTYPE html> <!-- Inicio do html --> <html lang="pt"> <!-- Inicio do head --> <head> <meta charset="utf-8"> <script src='https://kit.fontawesome.com/a076d05399.js'></script> <link rel="icon" type="imagem/png" href="images/dynatrace.png" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://unpkg.com/@popperjs/core@2"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- CSS Customizado --> <link href="css/ambiente-monitorado.css" rel="stylesheet"> </head> <!-- Fim do head --> <!-- Inicio do body --> <body> <header> <title>Dynatrace Managed</title> <!-- Inicio do nav fixado no topo--> <div id="nav"> <nav class="navbar navbar-inverse navbar-fixed-top"> <!-- Inicio div container-fluid --> <div class="container-fluid"> <div class="navbar-header"> <!-- Imagem do logo da Dynatrace a esquerda --> <a class="navbar-brand" href="#"><img id="imagem-logo-dynatrace" src="images/dynatrace.png" width="30px" height="30px" alt="Logo Principal" title="Logo Dynatrace"></a> </div> <!-- Inicio ul nav com opções das páginas --> <ul class="nav navbar-nav nav-custom"> <li><a href="index.html">Home</a></li> <li class="active"><a href="ambiente-monitorado.html">Ambientes Monitorados</a> <li><a href="arquitetura.html">Arquitetura Dynatrace</a></li> <li><a href="#">Downtime</a></li> <li><a href="#">Indicadores</a></li> <li><a href="como-funciona.html">Licenças</a></li> <li><a href="#">Métricas</a></li> </ul> <!-- Fim ul nav com opções das páginas --> <!-- Inicio ul nav da diretia, com search e login --> <ul class="nav navbar-nav navbar-right nav-custom"> <!-- Icone e botão login --> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> <!-- Inicio form do search --> <form class="navbar-form navbar-left" action="/action_page.php"> <div class="input-group"> <!-- Input do search --> <input type="text" class="form-control" placeholder="Search" name="search"> <div class="input-group-btn"> <!-- Botão de submit do search --> <button class="btn btn-default" type="submit"> <!-- Icone do search --> <i class="glyphicon glyphicon-search"></i> </button> </div> <!-- Fim div input-group-btn --> </div> <!-- Fim div input-group --> </form> <!-- Fim form do search --> </ul> <!-- Fim ul nav da diretia, com search e login --> </div> <!-- Fim div container-fluid --> </nav> </div> <!-- Fim do nav fixado no topo--> </header> <div id="div-main"> <div id="div-botoes-pesquisa"> <button class="button-title btn btn-info" id="button-buscar-licencas-ambiente" data-toggle="tooltip" aria-pressed="false"><i class="fas fa-bezier-curve fa-2x" aria-hidden="true" title="Por Ambiente"></i></button> <button class="button-title btn btn-info" id="button-buscar-licencas-servidor"><i class="fas fa-server fa-2x" aria-hidden="true" title="Por Servidor"></i></button><br><br> <input class="form-control mr-sm-2" type="text" id="input-search-host-group" name="filtro" placeholder="Filtrar"> </div> <div id="div-mostra-total-licencas"></div> <div id="div-table-licencas" class="div-table-licencas table-responsive"> <table class="table table-striped table-hover table-bordered" id="table-licencas"> <thead> <tr> <th class="linha-titulo-tabela">Problema</th> <th class="linha-titulo-tabela">Camada Impactada</th> <th class="linha-titulo-tabela">Status</th> <th class="linha-titulo-tabela">Tipo Erro</th> <th class="linha-titulo-tabela">Usuários Impactados</th> </tr> </thead> <tbody id="table-body"> </tbody> </table> </div> <div id="demo"></div> </div> <script src="js/api-get-problems.js"></script> <script src="js/disable-button.js"></script> <script src="js/filtrar-search-licencas.js"></script> </body> <!-- Fim do body --> </html> <!-- Fim do html --> $(document).ready(function() { const Url=''; $("#button-buscar-licencas-ambiente").click(function(){ $.ajax({ url: Url, type:"GET", success: function(result){ console.log(result); var problema = result.problems; var userimpactado = result.problems.impactAnalysis; $.each(problema, function(i, value) { console.log('The value at arr[' + i + '] is: ' + value.displayId); var newRow = $('<tr class="linha-table">'); var cols = ""; cols += '<td class="displayId" id="displayId">' + value.displayId + '</td>'; cols += '<td class="impactLevel" id="impactLevel">' + value.impactLevel + '</td>'; cols += '<td class="status" id="status">' + value.status + '</td>'; cols += '<td class="title" id="title">' + value.title + '</td>'; cols += '<td class="estimatedAffectedUsers" id="estimatedAffectedUsers">' + value.impactAnalysis.impacts.estimatedAffectedUsers + '</td>'; newRow.append(cols); $("#table-licencas").append(newRow); }); }, error:function(error){ console.log('Error ${error}') } }); }); }); Preciso pegar as informações dos campos 
      estimatedAffectedUsers: 0, numberOfPotentiallyAffectedServiceCalls: 4496   Cada value.displayId pode ter 1 ou mais impactedEntity.
      impactAnalysis: 
        {
      impacts:    [   { impactType: "SERVICE", impactedEntity:    { entityId:    { id: "SERVICE-034769111916BA3B", type: "SERVICE" }, name: "" }, estimatedAffectedUsers: 0, numberOfPotentiallyAffectedServiceCalls: 4496 },   { impactType: "APPLICATION", impactedEntity:    { entityId:    { id: "APPLICATION-A8D06FDBBA2EE7F6", type: "APPLICATION" }, name: "Meu Vivo PJ - Web" }, estimatedAffectedUsers: 2 },   { impactType: "SERVICE", impactedEntity:    { entityId:    { id: "SERVICE-B7A98E7FDD81118A", type: "SERVICE" }, name: "online-importer-server-v*" }, estimatedAffectedUsers: 0, numberOfPotentiallyAffectedServiceCalls: 775 },   { impactType: "SERVICE", impactedEntity:    { entityId:    { id: "SERVICE-D773255CD13D8968", type: "SERVICE" }, name: "" }, estimatedAffectedUsers: 1, numberOfPotentiallyAffectedServiceCalls: 34 }
    • By Rodrigo Biaggio
      Pessoal, alguém consegue me ajudar? Eu preciso pegar os dados de um array, mas não estou conseguindo. 
       
      <!DOCTYPE html> <!-- Inicio do html --> <html lang="pt"> <!-- Inicio do head --> <head> <meta charset="utf-8"> <script src='https://kit.fontawesome.com/a076d05399.js'></script> <link rel="icon" type="imagem/png" href="images/dynatrace.png" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://unpkg.com/@popperjs/core@2"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- CSS Customizado --> <link href="css/ambiente-monitorado.css" rel="stylesheet"> </head> <!-- Fim do head --> <!-- Inicio do body --> <body> <header> <title>Dynatrace Managed</title> <!-- Inicio do nav fixado no topo--> <div id="nav"> <nav class="navbar navbar-inverse navbar-fixed-top"> <!-- Inicio div container-fluid --> <div class="container-fluid"> <div class="navbar-header"> <!-- Imagem do logo da Dynatrace a esquerda --> <a class="navbar-brand" href="#"><img id="imagem-logo-dynatrace" src="images/dynatrace.png" width="30px" height="30px" alt="Logo Principal" title="Logo Dynatrace"></a> </div> <!-- Inicio ul nav com opções das páginas --> <ul class="nav navbar-nav nav-custom"> <li><a href="index.html">Home</a></li> <li class="active"><a href="ambiente-monitorado.html">Ambientes Monitorados</a> <li><a href="arquitetura.html">Arquitetura Dynatrace</a></li> <li><a href="#">Downtime</a></li> <li><a href="#">Indicadores</a></li> <li><a href="como-funciona.html">Licenças</a></li> <li><a href="#">Métricas</a></li> </ul> <!-- Fim ul nav com opções das páginas --> <!-- Inicio ul nav da diretia, com search e login --> <ul class="nav navbar-nav navbar-right nav-custom"> <!-- Icone e botão login --> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> <!-- Inicio form do search --> <form class="navbar-form navbar-left" action="/action_page.php"> <div class="input-group"> <!-- Input do search --> <input type="text" class="form-control" placeholder="Search" name="search"> <div class="input-group-btn"> <!-- Botão de submit do search --> <button class="btn btn-default" type="submit"> <!-- Icone do search --> <i class="glyphicon glyphicon-search"></i> </button> </div> <!-- Fim div input-group-btn --> </div> <!-- Fim div input-group --> </form> <!-- Fim form do search --> </ul> <!-- Fim ul nav da diretia, com search e login --> </div> <!-- Fim div container-fluid --> </nav> </div> <!-- Fim do nav fixado no topo--> </header> <div id="div-main"> <div id="div-botoes-pesquisa"> <button class="button-title btn btn-info" id="button-buscar-licencas-ambiente" data-toggle="tooltip" aria-pressed="false"><i class="fas fa-bezier-curve fa-2x" aria-hidden="true" title="Por Ambiente"></i></button> <button class="button-title btn btn-info" id="button-buscar-licencas-servidor"><i class="fas fa-server fa-2x" aria-hidden="true" title="Por Servidor"></i></button><br><br> <input class="form-control mr-sm-2" type="text" id="input-search-host-group" name="filtro" placeholder="Filtrar"> </div> <div id="div-mostra-total-licencas"></div> <div id="div-table-licencas" class="div-table-licencas table-responsive"> <table class="table table-striped table-hover table-bordered" id="table-licencas"> <thead> <tr> <th class="linha-titulo-tabela">Problema</th> <th class="linha-titulo-tabela">Camada Impactada</th> <th class="linha-titulo-tabela">Status</th> <th class="linha-titulo-tabela">Tipo Erro</th> <th class="linha-titulo-tabela">Usuários Impactados</th> </tr> </thead> <tbody id="table-body"> </tbody> </table> </div> <div id="demo"></div> </div> <script src="js/api-get-problems.js"></script> <script src="js/disable-button.js"></script> <script src="js/filtrar-search-licencas.js"></script> </body> <!-- Fim do body --> </html> <!-- Fim do html --> $(document).ready(function() { const Url=''; $("#button-buscar-licencas-ambiente").click(function(){ $.ajax({ url: Url, type:"GET", success: function(result){ console.log(result); var problema = result.problems; var userimpactado = result.problems.impactAnalysis; $.each(problema, function(i, value) { console.log('The value at arr[' + i + '] is: ' + value.displayId); var newRow = $('<tr class="linha-table">'); var cols = ""; cols += '<td class="displayId" id="displayId">' + value.displayId + '</td>'; cols += '<td class="impactLevel" id="impactLevel">' + value.impactLevel + '</td>'; cols += '<td class="status" id="status">' + value.status + '</td>'; cols += '<td class="title" id="title">' + value.title + '</td>'; cols += '<td class="estimatedAffectedUsers" id="estimatedAffectedUsers">' + value.impactAnalysis.impacts.estimatedAffectedUsers + '</td>'; newRow.append(cols); $("#table-licencas").append(newRow); }); }, error:function(error){ console.log('Error ${error}') } }); }); }); Preciso pegar as informações dos campos 
      estimatedAffectedUsers: 0, numberOfPotentiallyAffectedServiceCalls: 4496   Cada value.displayId pode ter 1 ou mais impactedEntity.
      impactAnalysis: 
        {
      impacts:    [   { impactType: "SERVICE", impactedEntity:    { entityId:    { id: "SERVICE-034769111916BA3B", type: "SERVICE" }, name: "" }, estimatedAffectedUsers: 0, numberOfPotentiallyAffectedServiceCalls: 4496 },   { impactType: "APPLICATION", impactedEntity:    { entityId:    { id: "APPLICATION-A8D06FDBBA2EE7F6", type: "APPLICATION" }, name: "Meu Vivo PJ - Web" }, estimatedAffectedUsers: 2 },   { impactType: "SERVICE", impactedEntity:    { entityId:    { id: "SERVICE-B7A98E7FDD81118A", type: "SERVICE" }, name: "online-importer-server-v*" }, estimatedAffectedUsers: 0, numberOfPotentiallyAffectedServiceCalls: 775 },   { impactType: "SERVICE", impactedEntity:    { entityId:    { id: "SERVICE-D773255CD13D8968", type: "SERVICE" }, name: "" }, estimatedAffectedUsers: 1, numberOfPotentiallyAffectedServiceCalls: 34 }
×

Important Information

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