tabela Adicionar linha na tabela

edbarbosa · Fevereiro 19, 2019

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>