Generating new table rows with different textarea Names

Question

Hello, I am trying to find a solution to my problem, I do not understand any javascript, but if anyone can help me I appreciate it. I have the following script that adds new lines in my table whenever I click a button, it works perfectly but each td has a textarea and would like to generate a different name on each line. Does anyone have any suggestions how they could do this? Follow the script:

<script>    
    var cadastro2 = {
    linha2: '<td align="center"><textarea class="cols3" rows="2" cols="12" style="overflow: hidden" onkeyup="this.style.height=\'24px\'; this.style.height = this.scrollHeight + 1 + \'px\';" onkeydown="this.style.height=\'24px\'; this.style.height = this.scrollHeight - 1 - \'px\';" name="campo1"></textarea></td>'+ 
            '<td align="center"><textarea class="cols3" rows="2" cols="12" style="overflow: hidden" onkeyup="this.style.height=\'24px\'; this.style.height = this.scrollHeight + 1 + \'px\';" onkeydown="this.style.height=\'24px\'; this.style.height = this.scrollHeight - 1 - \'px\';" name="campo2"></textarea></td>'+ 
            '<td align="center"><textarea class="cols3" rows="2" cols="12" style="overflow: hidden" onkeyup="this.style.height=\'24px\'; this.style.height = this.scrollHeight + 1 + \'px\';" onkeydown="this.style.height=\'24px\'; this.style.height = this.scrollHeight - 1 - \'px\';" name="campo3"></textarea></td>'+ 
            '<td align="center"><textarea class="cols3" rows="2" cols="12" style="overflow: hidden" onkeyup="this.style.height=\'24px\'; this.style.height = this.scrollHeight + 1 + \'px\';" onkeydown="this.style.height=\'24px\'; this.style.height = this.scrollHeight - 1 - \'px\';" name="campo4"></textarea></td>'+   
            '<td align="center" colspan="2"><textarea class="cols4" rows="2" cols="35" style="overflow: hidden" onkeyup="this.style.height=\'24px\'; this.style.height = this.scrollHeight + 1 + \'px\';" onkeydown="this.style.height=\'24px\'; this.style.height = this.scrollHeight - 1 - \'px\';" name="campo5"></textarea></td>'+ 
            '<td align="center" class="semborda"><input type="button" value="-" class="ui-button ui-widget ui-state-default ui-corner-all principal" onclick="javascript:deleteRow2(this.parentNode.parentNode.rowIndex)" title="Remover linha"></input></td>',

    adicionarLinha2: function(){
        //encontrar o elemento com id "tblCadastroTBody2" (tbody)
        var tbody = document.getElementById('tblCadastroTBody2');

        //criar um novo elemento do tipo TR
        var tr = document.createElement('tr');

        //colocar o conteúdo da linha no TR
        tr.innerHTML = cadastro2.linha2;

        //inserir a linha criada no tbody
        tbody.appendChild(tr);
    }
}
</script>

Answer 1

function addLinha() {
  //Recupera a tabela onde serão adicionado as linhas
  var table = document.getElementById("myTable");

  //recupera a quantidade atual de linhas da tabela, para inserir a nova linha na proxima posição disponivel
  var proximaLinha = table.rows.length
  var row = table.insertRow(proximaLinha);
  
  //Como serão 5 células, um for para criar cada uma das células e os textareas
  for(var c = 0; c < 5; c++) {
    //cria uma nova célula para a linha
    var cell0 = row.insertCell(c);
    
    //Cria um novo elemento textarea
    var textarea0 = document.createElement("textarea");
    
    //Define a propriedade class
    textarea0.className = "cols3"
    
    //Define a propriedade rows
    textarea0.rows = 2;
    
    //Define a propriedade cols
    textarea0.cols = 12;
    
    //Define a propriedade name
    //o nome será unico para cada textarea no formato "campo_NUMEROLINHA_NUMEROCOLUNA"
    textarea0.name = "campo_" + row.rowIndex + "_" + cell0.cellIndex;
    
    //Altera o style do textarea definindo a propriedade overflow
    textarea0.style.overflow = "hidden";
    
    //Insere o textarea criado dentro da celula
    cell0.appendChild(textarea0);
  }
}

<table id="myTable">
  <tbody>
  </tbody>
</table>
<input type="button" onclick="addLinha()" value="add linha"/>