Jump to content

edbarbosa

Members
  • Content count

    1
  • Joined

  • Last visited

Community Reputation

0 Comum

About edbarbosa

  1. edbarbosa

    Adicionar linha na tabela

    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!
×

Important Information

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