Jump to content
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!

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 tekton
      Preciso fazer um CRUD de teste para tentar uma vaga em uma empresa. Nesse teste, tive que criar os campos Nome, Email, Telefone e Endereço, e deveria ser possível inserir mais de um endereço por nome nesse CRUD. Acho que não da pra simplesmente criar outro campo para inserir outro endereço. Acho que o objetivo do teste é que eu crie relacionamento de tabelas, mas não faço ideia de como começar. Estou fazendo o CRUD com PHP e já tenho tudo pronto, adicionar, editar e excluir. Já está tudo funcionando. Só falta agora essa opção pra poder colocar mais de um endereço por nome. Vou colocar o código da classe e do BD. Se precisarem de mais algum é só avisar. Agradeço de antemão pela ajuda.
       
      -- phpMyAdmin SQL Dump -- version 4.8.3 -- https://www.phpmyadmin.net/ -- -- Host: localhost:3306 -- Generation Time: Nov 16, 2019 at 11:19 PM -- Server version: 5.7.24 -- PHP Version: 7.3.7 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET AUTOCOMMIT = 0; START TRANSACTION; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Database: `crudoo` -- -- -------------------------------------------------------- -- -- Table structure for table `contatos` -- CREATE TABLE `contatos` ( `id` int(11) UNSIGNED NOT NULL, `nome` varchar(100) DEFAULT NULL, `email` varchar(100) NOT NULL DEFAULT '', `telefone` varchar(20) NOT NULL, `endereco` varchar(100) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8; -- -- Dumping data for table `contatos` -- INSERT INTO `contatos` (`id`, `nome`, `email`, `telefone`, `endereco`) VALUES (2, 'test2e', 'teste2@teste.com', '316497', 'rua a'), (4, 'wanderson', 'sonwander@yahoo.com.br', '985930559', 'rua brasil'), (6, 'andrezinho', 'andre@site.com', '2222222222', 'rua j'); -- -- Indexes for dumped tables -- -- -- Indexes for table `contatos` -- ALTER TABLE `contatos` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `contatos` -- ALTER TABLE `contatos` MODIFY `id` int(11) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7; COMMIT; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; <?php class Contato { private $pdo; public function __construct() { $this->pdo = new PDO("mysql:dbname=crudoo;host=localhost", "root", "root"); } public function adicionar($email, $nome, $telefone, $endereco) { if($this->existeEmail($email) == false) { $sql = "INSERT INTO contatos (nome, email, telefone, endereco) VALUES (:nome, :email, :telefone, :endereco)"; $sql = $this->pdo->prepare($sql); $sql->bindValue(':nome', $nome); $sql->bindValue(':email', $email); $sql->bindValue(':telefone', $telefone); $sql->bindValue(':endereco', $endereco); $sql->execute(); return true; } else { return false; } } public function getInfo($id) { $sql = "SELECT * FROM contatos WHERE id = :id"; $sql = $this->pdo->prepare($sql); $sql->bindValue(':id', $id); $sql->execute(); if($sql->rowCount() > 0) { return $sql->fetch(); } else { return array(); } } public function getAll() { $sql = "SELECT * FROM contatos"; $sql = $this->pdo->query($sql); if($sql->rowCount() > 0) { return $sql->fetchAll(); } else { return array(); } } public function editar($nome, $email, $telefone, $endereco, $id) { if($this->existeEmail($email) == false){ $sql = "UPDATE contatos SET nome = :nome, email = :email, telefone = :telefone, endereco = :endereco WHERE id = :id"; $sql = $this->pdo->prepare($sql); $sql->bindValue(':nome', $nome); $sql->bindValue(':email', $email); $sql->bindValue(':telefone', $telefone); $sql->bindValue(':endereco', $endereco); $sql->bindValue(':id', $id); $sql->execute(); return true; } else { return false; } } public function excluir($id) { $sql = "DELETE FROM contatos WHERE id = :id"; $sql = $this->pdo->prepare($sql); $sql->bindValue(':id', $id); $sql->execute(); } private function existeEmail($email) { $sql = "SELECT * FROM contatos WHERE email = :email"; $sql = $this->pdo->prepare($sql); $sql->bindValue(':email', $email); $sql->execute(); if($sql->rowCount() > 0) { return true; } else { return false; } } }  
    • By lucas70770
      Olá, eu tenho um sistema de pedidos onde em sua tabela a linha impar é os dados do produto e a impar é a grade de produtos, segue o código:
      <table class="tabela-tab-produto"> <thead> <tr> <th width="43"></th> <th>Código</th> <th>Descrição</th> <th>Qtde.</th> <th>Preço Tab.</th> <th>Desc.</th> <th>Preço Líq.</th> <th>Subtotal</th> <th></th> </tr> </thead> <tbody> <tr id="5{1+2,2{4+1"> <td></td> <td>LS</td> <td>Cortinas Listradas</td> <td class="text-right padding-right-15">3 <small>Un</small></td> <td class="text-right"><small>R$</small> 119.9</td> <td class="text-center"></td> <td class="text-right"><small>R$</small> 150</td> <td class="text-right"><small>R$</small> 450</td> <td class="text-right"> <a class="button tiny btn-cinza btn_editar" id="1"><span class="icon icon-pencil"></span></a> <a class="button tiny btn-cinza btn_excluir margin-right-15" data-open="container_excluir" id="86" aria-controls="container_excluir" aria-haspopup="true" tabindex="0"><span class="icon icon-bin"></span></a> </td> </tr> <tr> <td colspan="9"> <div class="medium-12 columns"> <table class="tab-produto"> <thead> <tr> <th></th><th>380x230</th><th>580x230</th> </tr> </thead> <tbody> <tr><td>Azul Claro</td><td>1</td><td>-</td></tr><tr><td>Azul</td><td>-</td><td>2</td></tr> </tbody> </table> </div> </td> </tr><tr id="1{1+1"> <td></td> <td>VLI</td> <td>Cortinas Voil Liso</td> <td class="text-right padding-right-15">1 <small>Un</small></td> <td class="text-right"><small>R$</small> 79.9</td> <td class="text-center"></td> <td class="text-right"><small>R$</small> 79.9</td> <td class="text-right"><small>R$</small> 79.9</td> <td class="text-right"> <a class="button tiny btn-cinza btn_editar" id="3"><span class="icon icon-pencil"></span></a> <a class="button tiny btn-cinza btn_excluir margin-right-15" data-open="container_excluir" id="94" aria-controls="container_excluir" aria-haspopup="true" tabindex="0"><span class="icon icon-bin"></span></a> </td> </tr> <tr> <td colspan="9"> <div class="medium-12 columns"> <table class="tab-produto"> <thead> <tr> <th></th><th>280x230</th> </tr> </thead> <tbody> <tr><td>Azul</td><td>1</td></tr> </tbody> </table> </div> </td> </tr> </tbody> </table> Quero saber como posso apresentar essa tabela com o jspdf e jspdf-autotable(se for necessário). Nos meus testes ele esta tirando a tabela que esta dentro da tabela principal.
      Eu achei um artigo sobre isso(https://stackoverflow.com/questions/39386969/nested-tables-in-a-pdf-using-jspdf-and-jspdf-autotable) mas não consegui aplicar no meu caso. Obg   
    • By edionas
      Bom dia,
      a tempos venho tentando exibir o conteudo dos links abaixo na forma de tabela organizada, usando importação dos dados atraves do link:
      http://api.tcm.ce.gov.br/sim/1_0/licitacoes?codigo_municipio=002&data_realizacao_autuacao_licitacao=20100101_20100115
      http://api.tcm.ce.gov.br/sim/1_0/licitacoes.xml?codigo_municipio=002&data_realizacao_autuacao_licitacao=20100101_20100115
      http://api.tcm.ce.gov.br/sim/1_0/licitacoes.json?codigo_municipio=002&data_realizacao_autuacao_licitacao=20100101_20100115
      Porem não tenho conseguido exito.
    • By cesarfelix
      Bom dia!
       
      Estou com um problema num alinhamento de uma tabela de um sistema (SISObrasPref).
       
      No código abaixo, está cortando a impressão à esquerda da página:
       
      <table border=1 cellspacing=0 cellpadding=0 style='border-collapse:collapse;
       border:none;mso-border-alt:solid windowtext .5pt;mso-padding-alt:0cm 3.5pt 0cm 3.5pt'>
       <tr style='height:58.75pt;mso-yfti-lastrow:yes;page-break-inside:avoid'>
        <td width=617 valign=top style='width:462.5pt;border:solid windowtext .5pt;
        padding:0cm 3.5pt 0cm 3.5pt;height:58.75pt'>
        <h1 align=left style='text-align:left'>&nbsp;</h1>
        <h1><span style='font-size:12.0pt'>&lt;#NOME_PREFEITURA&gt;<o:p></o:p></span></h1>
        <p class=MsoNormal align=center style='text-align:center'><b
        style='mso-bidi-font-weight:normal'>&lt;#DEPARTAMENTO_PREFEITURA&gt;<o:p></o:p></b></p>
        </td>
       </tr>
      </table>
       
      Como eu faço para mover toda a tabela para a direita, para que a impressão saia correta?
       
       

    • By malaho
      Olá amigos, estou desenvolvendo um site, e uma das páginas possuem um índice de palavras.
      Queria que, ao clicar em uma palavra, o significado da mesma aparece se na mesma página, abaixo, dentro de uma célula de tabela. 
      Já pesquisei e não encontrei nada sobre. Desde já agradeço a ajuda.
×

Important Information

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