Add +1 to an Id when adding fields dynamically

Question

Add +1 to an Id when adding fields dynamically

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

What command does JavaScript use to add +1 to an id name of a given field in a table?

Dynamically add tr and in this tr a field has a script that creates a new tr with the same fields as the previous one. How do I make this new field include in the name of the +1 field id.

Example:

id = nome

Clicking add 3 times creates:

id = nome1
id = nome2
id = nome3

I'm a layman in JavaScript I'm having trouble finding the command that arrows the id of the table and adds the variable next to the name, which goes with a counter with every addition including +1.

javascript

asked by anonymous 29.03.2017 / 16:23

2 answers

upload outside the public_html directory How to identify the user in Ratchet PHP

score 0 · Answer 1

You can concatenate the name with a counter:

var cont = 1;
var nome = 'Teste';
function mostrar(){
  document.getElementById("res").innerHTML = nome + cont++;
}

<button onclick="mostrar()">Exibir</button>
<br/>
<label id="res"></label>

score 0 · Answer 2

I'll explain by putting the code:

In that part and where does my button add replicate my tr allowing to remove if necessary.

<script type="text/javascript">
        $(function () {
          function removeCampo() {
                $(".removerCampo").unbind("click");
                $(".removerCampo").bind("click", function () {
                   if($("tr.linhas").length > 1){
                        $(this).parent().parent().remove();
                   }
                });
          }

            $(".adicionarCampo").click(function () {
                novoCampo = $("tr.linhas:first").clone();
                novoCampo.find("input").val("");
                novoCampo.insertAfter("tr.linhas:last");
                removeCampo();
          });
        });
    </script>

In this second script and where clicking on my select and choosing an item it goes to the database and searches for information about the value of this item and returns it in the resultd class td

<script type="text/javascript">
    function listanome(nome){
        if(nome != ''){
                    var dados = {
                        listanome : nome
                    }
                    $.post('../BUSCAR_BANCO/busca_preco.php', dados, function(retorna){
                        $(".resultado2").html(retorna);
                    });
        }else{
        alert("Sem Equipamento Selecionado");    
        }
    }
    </script>

IN HTML THIS IS SO IN TR THAT IS REPLICATED AND IT RETURNS THE ITEM VALUE CONSULT:

<tr class="linhas">
                <td colspan="4">
                    <select style="width:355px;" name="descricao[]" id="nome" onchange="listanome(this.value)">
                        <option value="">Selecione..</option>
                                    <?php
                                        include_once '../conexaobancodedados.php';

                                        $sql = "select * from  tabelapreco left outer join unidades on unidades.id_unidade = tabelapreco.id_unidade order by 'nome_tabela'";

                                        $result=  mysql_query($sql,$con);
                                        if(@mysql_num_rows($result)>0){

                                        while($row =  mysql_fetch_array($result)){

                                        ?>
                                        <option value="<?php echo $row["id_tabela"];?>"><?php echo $row["nome_tabela"];?> (<?php echo $row["nome_unidade"];?>)</option>

                                        <?php           
                                        }
                                        }else{
                                            ?>
                                            <option value="">Sem Cadastro de Equipamento</option>
                                            <?php 
                                        }

                                        ?>
                    </select>
                </td>
                <td><input type="number" style="width:50px;" size="1" name="qtd[]" id="qnt"></td>
                <td class="resultado2"></td>
                <td><input size="10" name="valortotal[]" id="total" onKeyPress="return(MascaraMoeda(this,'.',',',event))"></td>
                <td><input size="10" name="royalties[]" onKeyPress="return(MascaraMoeda(this,'.',',',event))"></td>
                <td><input size="6" name="imposto[]" onKeyPress="return(MascaraMoeda(this,'.',',',event))"></td>
                <td><input size="16" name="transporte[]" onKeyPress="return(MascaraMoeda(this,'.',',',event))"></td>
                <td><input size="11" name="desconto[]" onKeyPress="return(MascaraMoeda(this,'.',',',event))"></td>
                <td><input size="16" name="valorfinal[]" onKeyPress="return(MascaraMoeda(this,'.',',',event))"></td>
                <td><a href="#" class="removerCampo" title="Remover linha"><input type="button" name="Excluir" style="width:70px;background-color:red;"></a></td>
            </tr>
            </tbody>
            <tfoot>
                <tr>
                       <td colspan="13">
            <center><a href="#" class="adicionarCampo" title="Adicionar item"><input type="button" name="adicionar" value="Adicionar"></a></center>
                       </td>
                </tr>

            </tfoot>

The problem is that when doing the first select it brings me the return of the right value, being that when I click on add that creates the second line and I make the query of another item in the new select it brings the value to all the fields of the td class result2, since when replicating the line the name remains the same of that class.

Any ideas how to solve this? I am mt layman in javascript and just need to close it.