Inserir row em uma table

Front-end JavaScript
, , , ,
#1

Olá pessoal, blz?

Fiz uma function que tem o seguinte objetivo:

• Quando clicar no botão adicionar, deverá adicionar o conteúdo do select na table.

O problema ocorre quando clico no botão adicionar, em primeira instância ele travou e não deu erro, já na segunda tentativa ele caiu na condição false, e não estou conseguindo identificar aonde estou cometendo a falha.

//model
public function getId($id)
{
  $this->db->from('procedimento');
  $this->db->where('proc_id', $id, false);

  return $this->db->get()->row();
}

//controller
public function getProcedimento()
{
$proc_id = $this->input->post('proc_id');

$procedimento = $this->Procedimento_model->getId($proc_id);

$procedimento_row = '<tr>
					  <td>' . $procedimento->proc_id . '</td>
					  <td>' . $procedimento->proc_descricao. '</td>
					  <td>' . $procedimento->proc_valor. '</td>
				     </tr>';

echo json_encode($procedimento_row);  	
}

//view
<div class="row">
  <div class="form-group">
    <div class="col-xs-6">
      <label for="procedimento">Procedimentos</label>
      <select id="procedimento" class="chosen-select" name="procedimento">
        <option value="">Selecione</option>
	<?php foreach($procedimentos as $procedimento) { ?>
	    <option value="<?= $procedimento->proc_id ?>"><?= $procedimento->proc_descricao ?></option>
	<?php } ?>
	</select>
    </div>
    <div class="col-xs-6" style="margin-top: 25px;">
       <button type="button" class="btn btn-primary" onclick="addProcedimento(document.getElementById('procedimento'))">Adicionar</button>
    </div>
  </div>
</div>

//script
function addProcedimento(proc_id) {
	$.ajax({
		url: base_url + 'Consulta/getProcedimento',
		type: "POST",
		data: {
			'proc_id': proc_id
		},
		dataType: 'json',
		success: function(data) {
			$('#tb_procedimento').append(data);
		},
		error: function() {
            //se eu não colocar no onclick document.getElementById('procedimento') ele cai aqui
			alert('Ops! Algo deu errado, tente novamente!');  
		}
	});
}

Desde já agradeço.

#2

Vendo por cima, será que não é o id? se adicionar um cont? tipo id1, id2… Abaixo uma função que fiz:

var conta=0;
var n=0;

function novaLinha(){
	if (conta < 4){
		conta++;
		n++;
	var parte1 = "<tr class='resultado2'><td><input type='text' name='palpite' id='palpite' size='40' maxlength='150'></td>";
	var parte2 = "<td  id='tabela_linha_" + conta + "'><input type='button' ";
	var parte3 = "value='remover' onClick=\"javascript:removeLinha('tabela_linha_"+conta+"')\"></input>";
	document.getElementById("tabela_produto").innerHTML += parte1 + parte2 + parte3;
	document.getElementById("tabela_produto").innerHTML += "</td></tr>";
	} else {
		alert('Limite de 5 Palpites por cadastro');
		alert('cadastre 5 e depois cadastre mais :)');
	}
}
       
function removeLinha(id){
	n = (n-1);
	conta = (conta-1);
	teste = document.getElementById(id);
    teste.parentNode.parentNode.removeChild(teste.parentNode);
}

</table>
<br><br>
<table border ="1px" cellspacing="0" cellpadding="8" id="tabela_produto" width="430px">
  	<tr class="resultado2">
		<td colspan="2"><input type="button" value=" + " onClick="javascript:novaLinha()"></input>&nbsp;&nbsp;Palpite(s): </td>
	</tr>
		<tr class="resultado2">
			<td id="tabela_linha_0" colspan="2"><input type='text' name='palpite' id='palpite' size='40' maxlength="150">&#42;<!-- <input type="button" value="remover" onclick="javascript:removeLinha('tabela_linha_0')"> -->&nbsp;&nbsp;(R$2,00 cada)</td>
			
		</tr>
</table>
Cadastro
Matrícula: *
Nome: *
Área: *
Ramal: *
Email: *
Ano: *
#3

@Pacato, estava certo no seu apontamento, o ID estava indo NULL.

Resolvi da seguinte forma

onclick="addProcedimento(document.getElementById('procedimento').options[document.getElementById('procedimento').selectedIndex].value)"

Obrigado

1 curtida