Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

cleyton47

Botão deletar

Por , em Javascript

Recommended Posts

cleyton47    0

cleyton47
Postado
Bom dia pessoal!
Sou iniciante estou com problema, gostaria de incluir um botão deletar ,
Botão: <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"></td>
porém não estou conseguindo , no caso teria colocar o botão neste trecho:
<script type="text/javascript">
$(document).ready(function(){
    $('#form_prepare').submit(function(){
        var $this = $( this );

        var tr = '<tr>'+
            '<td>'+$this.find("input[name='nome']").val()+'</td>'+
            '<td>'+$this.find("input[name='email']").val()+'</td>'+
            '<td>'+$this.find("input[name='telefone']").val()+'</td>'+
            '</tr>'
        $('#grid').find('tbody').append( tr );

        return false;
    });
});
</script>

 

Segue o código completo :

<?php
	if( $_SERVER['REQUEST_METHOD']=='POST' )
	{
		$sql = "INSERT INTO cliente ( id, nome, email, telefone ) VALUES ";
 
		$values = Array();
		for( $i=0; $i<count( $_POST['nome'] ); $i++ )
		{
			$values[] = "(NULL, '".filter( $_POST['nome'][$i] )."',
					'".filter( $_POST['email'][$i] )."',
					'".filter( $_POST['telefone'][$i] )."')";
		}
		echo $sql.implode( ',', $values );
	}
function filter( $str ){
	return addslashes( $str );//deixo demais filtros e validações por sua conta
}
?>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#form_prepare').submit(function(){
		var $this = $( this );
 
		var nome = $this.find("input[name='nome']").val(),
			email = $this.find("input[name='email']").val(),
			telefone = $this.find("input[name='telefone']").val();
 
		var tr = '<tr>'+
			'<td>'+nome+'</td>'+
			'<td>'+email+'</td>'+
			'<td>'+telefone+'</td>'+
			'</tr>'
		$('#grid').find('tbody').append( tr );
 
		var hiddens = '<input type="hidden" name="nome[]" value="'+nome+'" />'+
			'<input type="hidden" name="email[]" value="'+email+'" />'+
			'<input type="hidden" name="telefone[]" value="'+telefone+'" />';
 
		$('#form_insert').find('fieldset').append( hiddens );
 
		return false;
	});
});
</script>
<style type="text/css">
#main {
	width: 700px; margin: 0 auto;
}
</style>
</head>
<body>
	<div id="main">
		<form action="" method="post" id="form_prepare">
			<fieldset>
				<label>Nome: <input type="text" name="nome" /></label>
				<label>Telefone: <input type="text" name="email" /></label>
				<label>Email: <input type="text" name="telefone" /></label>
 
				<label><input type="submit" name="ok" value="Ok" /></label>
			</fieldset>
		</form><!-- /form_prepare -->
 
		<table id="grid">
			<thead>
				<tr>
					<th>Nome</th>
					<th>Telefone</th>
					<th>Email</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table><!-- /grid -->
		<form action="" method="post" id="form_insert">
			<fieldset style="display: none;"></fieldset>
			<label><input type="submit" name="cadastrar" value="Cadastrar" /></label>
		</form><!-- /form_insert -->
	</div><!-- /main -->
</body>
</html>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gabriel Massuquetti    0

Gabriel Massuquetti
Postado

Em seu script adicione mais uma td com button:

 

<script type="text/javascript">
$(document).ready(function(){
$('#form_prepare').submit(function(){
var $this = $( this );

var tr = '<tr>'+
'<td>'+$this.find("input[name=nome]").val()+'</td>'+
'<td>'+$this.find("input[name=email]").val()+'</td>'+
'<td>'+$this.find("input[name=telefone]").val()+'</td>'+

'<button onclick="RemoveTableRow(this)" type="button">Remover</button>'+
'</tr>'
$('#grid').find('tbody').append( tr );

return false;
});
});
</script>

 

 

adicione a chamada do script em seu HTML:

 

<script language="JavaScript" src="js/removeLinha.js"></script>

 

no seu código javascript removeLinha.js terá:

 

// esta função remove linha de tabela usando jquery
(function($) {
RemoveTableRow = function(handler) {
var tr = $(handler).closest('tr');
tr.fadeOut(400, function(){
tr.remove();
});
return false;
};
})(jQuery);
Atenção! Será necessário colocar jquery em seu projeto:
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

 

Este código no caso vai servir para você remover linha em tabela. Nada mais! Porém se desejar remover um input type="hidden" aí tem que dar uma pesquisada. Talvez você consiga remover usando o mesmo método que remove linha!

 

Aqui tem um artigo sobre tabela dinâmica e botão remover:

 

http://academyprogramming.blogspot.com.br/2015/02/tabela-dinamica-com-jquery-e-funcao.html

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito