Capture td value and move to a form?

Question

as I don’t know much (almost no javascript) I humbly come to ask for your help, I have a datatable populated by data that comes from the database, and when I click edit opens up a modal that should bring the data of the clicked line, but I’m not getting it, I have tried some out here, with explanations I found on the internet, but I could not succeed, help, javascript is the best solution, if not how to do this?

Follow the Table code

                         <table id="myTable" class="table table-striped table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>Id</th>
                                            <th>CNPJ</th>
                                            <th style= "white-space: nowrap;">Razão Social</th>
                                            <th>Telefone</th>
                                            <th>Plano</th>
                                            <th style= "white-space: nowrap;">Data da venda</th>
                                            <th style= "white-space: nowrap;">Data da renovação</th>
                                            <th style= "white-space: nowrap;">Valor do contrato</th>
                                            <th style= "white-space: nowrap;">Celular do Gestor</th>
                                            <th>Consultor</th>
                                            <th>Status</th>
                                            <th>Operadora</th>
                                            <th>Editar</th>
                                            <th>Excluir</th>
                                        </tr>
                                    </thead>
                                    <tbody> 
                                        <?php foreach ($clientes as $cliente){?>
                                        <tr>
                                            <td><?php echo $cliente->id?></td>
                                            <td style= "white-space: nowrap;"><?php echo $cliente->cnpj?></td>
                                            <td><?php echo $cliente->razaoSocial?></td>
                                            <td style= "white-space: nowrap;"><?php echo $cliente->telefone?></td>
                                            <td><?php echo $cliente->plano?></td>
                                            <td><?php echo date('d/m/Y', strtotime($cliente->dataVenda));?></td>
                                            <td><?php echo date('d/m/Y', strtotime($cliente->dataRenovacao));?></td>
                                            <td><?php echo $cliente->valorContrato?></td>
                                            <td><?php echo $cliente->celGestor?></td>
                                            <td><?php echo $cliente->consultor?></td>
                                            <td><?php echo $cliente->status?></td>
                                            <td><?php echo $cliente->operadora?></td>
                                            <td><a href="#openModalCliente"><img src="<?php echo base_url()?>assets/img/editar.png" alt="" width="30" height="30"/></a></td>
                                            <td><a onclick="myFunction()" href=""><img src="<?php echo base_url()?>assets/img/lixo.png" alt="" width="30" height="30"/></a></td>
                                        </tr>
                                        <?php }?>
                                    </tbody>
                                </table>

form

            <form role="form" method="post" action="<?php echo site_url();?>Cadastros/cadastro_cliente">
                        <div class="row">
                            <div class="col-xs-6 col-sm-6 col-md-6">
                                <div class="form-group">
                                                                <input required="true" value="" type="text" name="cnpj" onkeypress="mascara(this, '##.###.###/####-##')" maxlength="18" class="form-control input-sm">
                                </div>
                            </div>
                            <div class="col-xs-6 col-sm-6 col-md-6">
                                <div class="form-group">
                                    <input required="true" type="text" value="" name="razao-social" class="form-control input-sm">
                                </div>
                            </div>
                                                <div class="col-xs-6 col-sm-6 col-md-6">
                                <div class="form-group">
                                     <input required="true" value="" type="tel" onkeypress="mascara(this, '## ####-####')" maxlength="12"  name="telefone"class="form-control input-sm">
                                </div>
                            </div>
                                                <div class="col-xs-6 col-sm-6 col-md-6">
                                <div class="form-group">
                                                                <input required="true" value="" type="text" name="plano"  class="form-control input-sm">
                                </div>
                            </div>
                                                <div class="col-xs-12 col-sm-12 col-md-12">
                                <div class="form-group">Data da Venda
                                                                <input required="true" type="date" value="" name="data-venda" class="form-control input-sm">
                                </div>
                            </div>
                                                 <div class="col-xs-12 col-sm-12 col-md-12">
                                <div class="form-group">Data da Renovação
                                                                <input required="true" value="" type="date" name="data-renovacao" class="form-control input-sm">
                                </div>
                            </div>
                                                <div class="col-xs-6 col-sm-6 col-md-6">
                                <div class="form-group">
                                                                <input required="true" value="" type="text" name="valor-contrato" class="form-control input-sm">
                                </div>
                            </div>
                                                 <div class="col-xs-6 col-sm-6 col-md-6">
                                <div class="form-group">
                                                                <input required="true" value="" onkeypress="mascara(this, '## # ####-####')" maxlength="14" type="text" name="celular-gestor" class="form-control input-sm">
                                </div>
                            </div>
                                                <div class="col-xs-6 col-sm-6 col-md-6">
                                <div class="form-group">
                                                                <input required="true" value="" type="text" name="consultor" class="form-control input-sm">
                                </div>
                            </div>
                                                <div class="col-xs-6 col-sm-6 col-md-6">
                                <div class="form-group">
                                                                <input required="true" value="" type="text" name="status" class="form-control input-sm">
                                </div>
                            </div>
                                                <div class="col-xs-6 col-sm-6 col-md-6">
                                <div class="form-group">
                                                                <select required="true" name="operadora" class="form-control input-sm">

                                                                    <option value="tim">Tim</option>
                                                                    <option value="oi">Oi</option>
                                                                    <option value="claro">Claro</option>
                                                                    <option value="vivo">Vivo</option>
                                                                </select>
                                                            </div>
                            </div>
                                                 <div class="col-xs-6 col-sm-6 col-md-6">
                                                     <h2 style="color: green"><?php echo $this->session->flashdata("susses");?></h2>
                            </div>
                                            </div>
                                        <input type="submit" value="Atualizar" style="background-color: #106007; font-weight: bold; border-color: #106007;" class="btn btn-info btn-block">

                    </form>

Answer 1

Use Jquery that will make it much easier

1) First you must identify the line with the ID to perform a later query

<table id="myTable" class="table table-striped table-bordered table-hover">
<tr id="tr_' + v_1 + '"></tr>
<table>

2) Now recover the line id to fetch data and treat it in a function

<script>
    $(function(){
        $('#myTable tr').on('click',function(){
            var TrID = $(this).attr("id");

            ////// caso queira fazer com JSON
            $.getJSON('paginacontendoJSONquePodeser.php?id='+TrID, function (data) { 

                alert(data)

                //variáveis
                contador = 1; v_1 = ''; v_2 = ''; v_3 = ''; v_4 = ''; v_5 = ''; v_6 = ''; v_7 = ''; v_8 = '';
                if (data.length > 0) { // verifica se ocorreu resultado
                    // recupera a listagem de dados crie quantos necessários
                    v_1 = data[0].id;
                    v_2 = data[0].razaoSocial;
                    v_3 = data[0].plano;
                    v_4 = data[0].blablablabla;
                });
                    $('#ModalQUEvoceCRIOU #campoDoModal').val('').val(v_2);
                    $('#ModalQUEvoceCRIOU #campoDoModal').val('').val(v_3);
            });
            ///////////////////////////// caso queira fazer com POST
            $.post('paginanormal.php',{ id : TrID },function(data){
                if( data != '' ){

                    // faça um alert para ver o que está trazendo
                    alert(data)

                    //em seguida trate com o quiser os dados
                    $('#ModalQUEvoceCRIOU #campoDoModal').val('').val('faça como mostrado acima');
                }
            });
        });
    });
    // utilize um dos dois modelos ou pelo menos espero ter ajudado você a ter um norte
</script>