Ir para conteúdo
edbarbosa

Adicionar linha na tabela

Recommended Posts

Ola a todos,

sou iniciante ainda em curso e estou com um problema que não acho ajuda em lugar algum.

adquiri uma tabela e inseri conteúdos manuais para consulta futuras, mas preciso adicionar um botão

que insere uma linha com os 9 conteúdos na tabela do meu arquivo e grave no mesmo para consultas futuras.

e que os botoes de deletar e editar já existentes façam suas funções.

segue:

<!doctype html>
<html>
  <head>
    <title>tabela</title>
    <meta charset="utf-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script src="jquery.tablesorter.min.js"></script>
    <script src="jquery.tablesorter.pager.js"></script>
		<link rel="stylesheet" href="custom.css" media="screen" />
  </head>
  <body>
    
    <h1>tabela</h1>
    
    <form method="post" action="exemplo.html" id="frm-filtro">
      <p>
        <label for="pesquisar">Pesquisar</label>
        <input type="text" id="pesquisar" name="pesquisar" size="900" />
      </p>
    </form>
    
    <table cellspacing="0" summary="Tabela de dados fictícios">
      <thead>
        <tr>
          <th><input type="checkbox" value="1" id="marcar-todos" name="marcar-todos" /></th>
          <td>nome1</td>
          <td>nome2</td>
          <td>nome3</td>
          <td>nome4</td>
          <td>nome5</td>
          <td>nome6</td>
          <td>nome7</td>
          <td>nome8</td>
          <td>nome9</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="checkbox" value="1" name="marcar[]" /></td>
					<td>texto1</td>
          <td>texto2</td>
          <td>texto</td>
          <td>texto3</td>
          <td>texto4</td>
          <td>texto5</td>
          <td>texto6</td>
          <td>texto7</td>
          <td>texto8</td>
          <td>
            <a href="#"><img src="edit.png" width="16" height="16" /></a>
            <a href="#"><img src="delete.png" width="16" height="16" /></a>
          </td>
        </tr>
        <tr>
          <td><input type="checkbox" value="2" name="marcar[]" /></td>
					<td>texto1</td>
          <td>texto2</td>
          <td>texto</td>
          <td>texto3</td>
          <td>texto4</td>
          <td>texto5</td>
          <td>texto6</td>
          <td>texto7</td>
          <td>texto8</td>
          <td>
           <a href="#"><img src="edit.png" width="16" height="16" /></a>
            <a href="#"><img src="delete.png" width="16" height="16" 
            <!-- FINAL -->
      </tbody>
    </table>
    
    <div id="pager" class="pager">
    	<form>
				<span>
					Exibir <select class="pagesize">
							<option selected="selected"  value="900">900</option>
							<option value="50">50</option>
							<option value="30">30</option>
							<option  value="10">10</option>
					</select> registros
				</span>

				<img src="first.png" class="first"/>
    		<img src="prev.png" class="prev"/>
    		<input type="text" class="pagedisplay"/>
    		<img src="next.png" class="next"/>
    		<img src="last.png" class="last"/>
    	</form>
    </div>
    
    <script>
    $(function(){
      
      $('table > tbody > tr:odd').addClass('odd');
      
      $('table > tbody > tr').hover(function(){
        $(this).toggleClass('hover');
      });
      
      $('#marcar-todos').click(function(){
        $('table > tbody > tr > td > :checkbox')
          .attr('checked', $(this).is(':checked'))
          .trigger('change');
      });
      
      $('table > tbody > tr > td > :checkbox').bind('click change', function(){
        var tr = $(this).parent().parent();
        if($(this).is(':checked')) $(tr).addClass('selected');
        else $(tr).removeClass('selected');
      });
      
      $('form').submit(function(e){ e.preventDefault(); });
      
      $('#pesquisar').keydown(function(){
        var encontrou = false;
        var termo = $(this).val().toLowerCase();
        $('table > tbody > tr').each(function(){
          $(this).find('td').each(function(){
            if($(this).text().toLowerCase().indexOf(termo) > -1) encontrou = true;
          });
          if(!encontrou) $(this).hide();
          else $(this).show();
          encontrou = false;
        });
      });
      
      $("table") 
        .tablesorter({
          dateFormat: 'uk',
          headers: {
            0: {
              sorter: false
            },
            5: {
              sorter: false
            }
          }
        }) 
        .tablesorterPager({container: $("#pager")})
        .bind('sortEnd', function(){
          $('table > tbody > tr').removeClass('odd');
          $('table > tbody > tr:odd').addClass('odd');
        });
      
    });
    </script>
  </body>
</html>

lembrando que peguei esse script do GitHub:  https://github.com/tableless/exemplos/tree/gh-pages/melhorando-exibicao-tabelas-jquery

todos os arquivos estão disponíveis neste link

obrigado!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por PlatBubbles
      Ola, estou tendo dificuldade para fazer uma consulta seletiva usando duas tabelas, provavelmente estou errando a sintaxe da busca, agradeço caso alguem possa me passar a forma correta de fazer a busca.
       
      $sqluser = "SELECT aquestion_id, user_id FROM respostas WHERE user_id like '$logado' UNION SELECT * pergunta, question_id FROM questions WHERE question_id!=aquestion_id ORDER BY RAND() LIMIT 1"; Explicando
      Na tabela respostas preciso dos dados aquestion_id e user_id apenas do usuário Logado.
      Da tabela questions preciso da pergunta e da question_id que deve ser gerada de forma aleatória mas apenas com os Ids que não estejam  listados em aquestion_id.
      Na verdade as duas tabelas tinham o campo question_id porem estava confuso e por isso mudei o campo da primeira tabela para aquestion_id.
       
      Agradeço qualquer ajuda, e também pelo tempo dos que leram mesmo se não puderam ajudar.
      PlatBubbles
    • Por VLADIMIREMI
      Estou querendo fazer um sistema de gerenciamento de campeonato. Aqui na minha cidade, todas as comunidades tem um mine campeonato, e esse sistema visa atender essa demanda. Já estou finalizando em VBA no Excel, mas eu gostaria de fazer algo parecido em uma linguagem de programação, incluindo banco de dados, interface gráfica, menu de cadastro... entre outras opções. Só que não sei por onde começar, e nem qual a linguagem seria melhor indicada, até mesmo pra uma futura expansão de plataforma. O que vocês me recomendam?
    • Por degloriocg
      Bom dia, estou há duas semanas tentando fazer com que o gráfico chart.js pegue os dados do banco de dados e exiba em tempo real.
      Segue meu banco de dados.
      CREATE TABLE `tab_clientes` ( `id` int(11) NOT NULL, `data_nascimento` date DEFAULT NULL, `line` varchar(220) NOT NULL, `model` varchar(220) NOT NULL, `wo` varchar(220) NOT NULL, `tool` varchar(220) NOT NULL, `detection_point` varchar(220) NOT NULL, `defect_content` varchar(220) NOT NULL, `causes` varchar(220) NOT NULL, `owner` varchar(220) NOT NULL, `qty` varchar(220) NOT NULL, `ppm` varchar(220) NOT NULL, `action` varchar(220) NOT NULL, `symptom` varchar(220) NOT NULL, `status` varchar(10) DEFAULT NULL, `foto` varchar(200) DEFAULT NULL, `data_cadastro` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, `data_alteracao` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00' ) ENGINE=InnoDB DEFAULT CHARSET=latin1; A coluna Symptom ele da resposta Leakage ou Function, gostaria de contabilizar cada um e dar o resultado por semana( Por exemplo, da primeira semana de dezembro, teve 5 resultados Leakage, na segunda, 3 e assim por diante, dentro de cada mes.
      tentei assim... porém não consigo dividir os dias da semana em relação a data selecionada.
       
      <?php // Consultar dados $dados = array(); $sql = "SELECT symptom, COUNT(*) as data_nascimento FROM tab_clientes WHERE data_nascimento BETWEEN '2018-11-28' AND '2018-11-29' GROUP BY symptom"; $pdo = new PDO('mysql:host=localhost;dbname=db_blog', 'root', ''); $stmt = $pdo->query($sql); while ($obj = $stmt->fetchObject()) { switch ($obj->symptom) { case 'Leakage': $dados['Leakage'] = $obj->data_nascimento; break; case 'Function': $dados['Function'] = $obj->data_nascimento; break; } }?> <script> var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'line', data: { labels: ["Semana1", "Semana2", "Semana3", "Semana4", "Semana5"], <!--//Visto que o mes tem 5 semanas. --> datasets: [{ label: "Leakeage", data: [<?php echo $dados['Leakage']?>, <?php echo $dados['Leakage']?>, <?php echo $dados['Leakage']?>, <?php echo $dados['Leakage']?>, <?php echo $dados['Leakage']?>, <?php echo $dados['Leakage']?>, <?php echo $dados['Leakage']?>], lineTension: 0, backgroundColor: 'transparent', borderColor: '#007bff', borderWidth: 4, pointBackgroundColor: '#007bff' },{ label: "Function", data: [<?php echo $dados['Function']?>, <?php echo $dados['Function']?>, <?php echo $dados['Function']?>, <?php echo $dados['Function']?>, <?php echo $dados['Function']?>], lineTension: 0, backgroundColor: 'transparent', borderColor: '#7bff00', borderWidth: 4, pointBackgroundColor: '#7bff00' }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: false } }] }, legend: { display: false, } } }); </script> Se alguém puder me ajudar. Agradeço muito!!!
    • Por Skalke
      Boa noite,
       
      estou fazendo uma listagem de objetos do banco de dados em uma tabela com o PHP, e com cada registro, por meio de um WHILE, eu coloco um botão de excluir referente ao ID do respectivo item que será deletado. Enviando via ajax e deletando. Porém, ele só deixa deletar o primeiro registro da tabela, o que está em primeiro, os demais ele não deixa. Imagem do código ajax e da tabela anexadas. Agradeço desde ja pela ajuda


×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.