Pessoal gostaria de fazer uma table com campos dinâmicos, que possibilite o usuário adicionar os dados a quantidade de vezes necessárias. Fiz o seguinte código e o form funciona porem no momento que salvo o documento ele só salva o primeiro registro no Dataset. Queria um jeito que para cada linha da tabela ele criasse um registro dentro do dataset.
<html>
<head>
<link type="text/css" rel="stylesheet" href="/style-guide/css/fluig-style-guide.min.css"/>
<script type="text/javascript" src="/portal/resources/js/jquery/jquery.js"></script>
<script type="text/javascript" src="/portal/resources/js/jquery/jquery-ui.min.js"></script>
<script type="text/javascript" src="/portal/resources/js/mustache/mustache-min.js"></script>
<script type="text/javascript" src="/style-guide/js/fluig-style-guide.min.js" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('#mais').click(function(){
var next = $('#dimensionamentoPessoal tbody').children('tr').length + 1;
$('#dimensionamentoPessoal tbody').append('<tr>' +
'<td><input type="text" name="setor' + next + '" id="setor' + next + '" class="form-control" /></td>' +
'<td><input type="text" name="postoTrabalho' + next + '" id="postoTrabalho' + next + '" class="form-control" /></td>' +
'<td><input type="number" name="estabelecimento' + next + '" id="estabelecimento' + next + '" class="form-control" /></td>' +
'<td><input type="number" name="centroCusto' + next + '" id="centroCusto' + next + '" class="form-control" /></td>' +
'<td><input type="number" name="qtdSistema' + next + '" id="qtdSistema' + next + '" class="form-control" /></td>' +
'<td><input type="number" name="qtdPadrao' + next + '" id="qtdPadrao' + next + '" class="form-control" /></td>' +
'</tr>');
$(':hidden').val(next);
return false;
});
});
</script>
</head>
<body>
<div class="fluig-style-guide">
<form name="form" role="form">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fluigicon fluigicon-user-tasks icon-md"></i> Dimensionamento</h3>
</div>
<div class="panel-body">
<table id="dimensionamentoPessoal" class="table table-hover">
<thead>
<tr>
<td>Setor</td>
<td>Posto de Trabalho</td>
<td>Estabelecimento</td>
<td>Centro de Custo</td>
<td>Sistema</td>
<td>Padrão</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="setor1" id="setor1" class="form-control" /></td>
<td><input type="text" name="postoTrabalho1" id="postoTrabalho1" class="form-control" /></td>
<td><input type="number" name="estabelecimento1" id="estabelecimento1" class="form-control" /></td>
<td><input type="number" name="centroCusto1" id="centroCusto1" class="form-control" /></td>
<td><input type="number" name="qtdSistema1" id="qtdSistema1" class="form-control" /></td>
<td><input type="number" name="qtdPadrao1" id="qtdPadrao1" class="form-control" /></td>
</tr>
</tbody>
</table>
<input type="hidden" value="1" name="quantidade_itens" />
<a href="#" id="mais">Adicionar Dimensionamento</a>
</div>
</div>
</form>
</div>
</body>
</html>