Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá, queria tirar duas dúvidas em relação ao meu código...
Descrição do meu código: Uma tabela em que eu posso inserir e excluir linhas via DOM. A primeira célula de cada linha é um select em que os options tem que vir de um arquivo php.
<?php
session_start();
require 'config_site.php';
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tabela dinamica</title>
<style type="text/css" media="all">@import "css/estilo.css";</style>
<script type="text/javascript" src="js/jquery1.4.2.js"></script>
<script type="text/javascript">
var d = document ;
window.onload = function(){
d.getElementById( 'add' ).onclick = function(){
var oTable = d.getElementById( 'tabela' ) ;
var newTr = oTable.insertRow( -1 ) ;
newTr.setAttribute( 'id' , 'row' + oTable.rows.length ) ;
var selector = document.createElement('select');
selector.id = 'selProduto';
selector.name = 'selProduto';
selector.setAttribute('style', 'width:200px');
var option = document.createElement('option');
option.value = '0';
option.appendChild(document.createTextNode('Teste 1'));
selector.appendChild(option);
option = document.createElement('option');
option.value = '1';
option.appendChild(document.createTextNode('Teste 2'));
selector.appendChild(option);
newTr.insertCell(0).appendChild( selector ) ;
newTr.insertCell(1).appendChild( getInput() ) ;
newTr.insertCell(2).appendChild( getInput() ) ;
newTr.insertCell(3).appendChild( getInput() ) ;
newTr.insertCell(4).appendChild( getInput() ) ;
newTr.insertCell(5).appendChild( getInput() ) ;
newTr.insertCell(6).appendChild( getLinkExcluir( oTable.rows.length ) ) ;
}
}
function getLinkExcluir( rowId )
{
var oA = d.createElement( 'a' ) ;
oA.setAttribute( 'href' , '#' ) ;
oA.innerHTML = '<img src="conteudo/error.png" border="0" />' ;
oA.onclick = function(){ removerTr( rowId ) ; }
return oA ;
}
function getInput()
{
var oInput = d.createElement( 'input' ) ;
oInput.setAttribute( 'name' , 'inputs[]' ) ;
return oInput ;
}
function removerTr( rowId )
{
var iRow = d.getElementById( 'row' + rowId ).rowIndex ;
d.getElementById( 'tabela' ).deleteRow( iRow ) ;
return false ;
}
</script>
</head>
<body>
<form>
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="4" align="center"> </td>
</tr>
<tr>
<td width="942" colspan="3" align="center"> <span class="conteudo"><strong>Produtos</strong></span></td></tr>
<tr>
<td colspan="3">
<table id='tabela' border="2" cellpadding="0" cellspacing="0">
<tr class="arquivos">
<td width="180"> Produto </td>
<td width="150"> Inserção </td>
<td width="150"> Período </td>
<td width="150"> Pessoas/Dia </td>
<td width="150"> Valor/Inserção </td>
<td width="127"> Total </td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3">
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><button class="arquivos" id='add' type='button'>Adicionar Linha</button></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
a primeira dúvida é como fazer para receber os options do select de um arquivo php.a segunda dúvida é como fazer para quando dar o submit no form, recuperar os dados inseridos nos selects e inputs da tabela.
Cara, funcionou mesmo!!! Obrigado!
segue código da solução.
<?php
session_start();
require 'config_site.php';
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tabela dinamica</title>
<style type="text/css" media="all">@import "css/estilo.css";</style>
<script type="text/javascript" src="js/jquery1.4.2.js"></script>
<script type="text/javascript">
var d = document ;
window.onload = function(){
d.getElementById( 'add' ).onclick = function(){
var oTable = d.getElementById( 'tabela' ) ;
var newTr = oTable.insertRow( -1 ) ;
newTr.setAttribute( 'id' , 'row' + oTable.rows.length ) ;
newTr.insertCell(0).innerHTML = d.getElementById('produto').innerHTML ;
newTr.insertCell(1).appendChild( getInput() ) ;
newTr.insertCell(2).appendChild( getInput() ) ;
newTr.insertCell(3).appendChild( getInput() ) ;
newTr.insertCell(4).appendChild( getInput() ) ;
newTr.insertCell(5).appendChild( getInput() ) ;
newTr.insertCell(6).appendChild( getLinkExcluir( oTable.rows.length ) ) ;
}
}
function getLinkExcluir( rowId )
{
var oA = d.createElement( 'a' ) ;
oA.setAttribute( 'href' , '#' ) ;
oA.innerHTML = '<img src="conteudo/error.png" border="0" />' ;
oA.onclick = function(){ removerTr( rowId ) ; }
return oA ;
}
function getInput()
{
var oInput = d.createElement( 'input' ) ;
oInput.setAttribute( 'name' , 'inputs[]' ) ;
return oInput ;
}
function removerTr( rowId )
{
var iRow = d.getElementById( 'row' + rowId ).rowIndex ;
d.getElementById( 'tabela' ).deleteRow( iRow ) ;
return false ;
}
</script>
</head>
<body>
<form>
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="4" align="center"> </td>
</tr>
<tr>
<td width="942" colspan="3" align="center"> <span class="conteudo"><strong>Produtos</strong></span></td></tr>
<tr>
<td colspan="3">
<table id='tabela' border="2" cellpadding="0" cellspacing="0">
<tr class="arquivos">
<td width="180"> Produto </td>
<td width="150"> Inserção </td>
<td width="150"> Período </td>
<td width="150"> Pessoas/Dia </td>
<td width="150"> Valor/Inserção </td>
<td width="127"> Total </td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3">
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><button class="arquivos" id='add' type='button'>Adicionar Linha</button></td>
</tr>
</table>
</td>
</tr>
</table>
<div id="produto" style="display: none;">
<select style="width:200px;" name="prod" class="arquivos" id="prod" >
<?php
require 'config_site.php';
$sql = "SELECT * FROM produto ORDER BY descricao";
$resposta = mysql_query($sql);
if($resposta) {
while($linha = mysql_fetch_array($resposta)) {
$produto = $linha['descricao'];
$id_produto = $linha['id_produto'];
echo "<option value='$id_produto'>$produto</option>";
}
}
?>
</select>
</div>
</form>
</body>
</html>
cara, vou te falar 'a maneira simples':
>
a segunda dúvida é como fazer para quando dar o submit no form, recuperar os dados inseridos nos selects e inputs da tabela.
estude sobre arrays, o ideal do HTML que você vai gerar, é algo como:
ai você receberá no php, coisas como:$_POST['total']; //Array
com as posições:
$_POST['total'][0], $_POST['total'][1]...
ai a dúvida já não é mais javascript.