Пронумеровать создающиеся поля js

139

06 сентября 2019, 07:50

Всем привет. Есть функция для таблицы

function addField (argument) {
            var myTable = document.getElementById("mineTable");
            var currentIndex = myTable.rows.length;
            var currentRow = myTable.insertRow(-1);
            var valinRuss = document.createElement("textarea");
            valinRuss.setAttribute("name", "valinRuss" + currentIndex);
            var valinEng = document.createElement("textarea");
            valinEng.setAttribute("name", "valinEng" + currentIndex);
            var valinKaz = document.createElement("textarea");
            valinKaz.setAttribute("name", "valinKaz" + currentIndex);
            var td1 = document.createElement("td1");
            td1.setAttribute("name", "td1" + currentIndex);
            var currentCell = currentRow.insertCell(-1);
            currentCell.appendChild(td1);
            currentCell = currentRow.insertCell(-1);
            currentCell.appendChild(valinRuss);
            currentCell = currentRow.insertCell(-1);
            currentCell.appendChild(valinEng);
            currentCell = currentRow.insertCell(-1);
            currentCell.appendChild(valinKaz);
        }

И таблица в html типа:

<table id="mineTable">
    <tr>
        <th>Заголовок1</th>
    </tr>
    <tr>
    <input type="button" class="button" value="+" onclick="addField();">
    </tr>
    <tr>
        <td></td>
        <td>Знач 1</td>
        <td>Знач 2</td>
        <td>Знач 3</td>
    </tr>
        <tr>
            <td name="td1">1</td>
            <td><textarea name="valinRuss">123</textarea></td>
            <td><textarea name="valinEng"></textarea></td>
            <td><textarea name="valinKaz"></textarea></td>
        </tr>
    </table>
</table>

Подскажите, как сделать, чтобы название первого поля было пронумеровано? Например: 1 (дальше 3 поля input) 2 (дальше 3 поля input) 3 (дальше 3 поля input) 4 ...

Answer 1

Создаёте за пределами функции некую переменную-счётчик, в неё записываете цифру 2 (номер второго ряда инпутов), при клике выводите это значение в первую ячейку (<td name="td1">) и увеличиваете значение на 1:

var count = 2; 
function addField (argument) { 
  var myTable = document.getElementById("mineTable"); 
  var currentIndex = myTable.rows.length; 
  var currentRow = myTable.insertRow(-1); 
 
  var valinRuss = document.createElement("textarea"); 
  valinRuss.setAttribute("name", "valinRuss" + currentIndex); 
 
  var valinEng = document.createElement("textarea"); 
  valinEng.setAttribute("name", "valinEng" + currentIndex); 
 
  var valinKaz = document.createElement("textarea"); 
  valinKaz.setAttribute("name", "valinKaz" + currentIndex); 
 
  var td1 = document.createElement("td1"); 
  td1.setAttribute("name", "td1" + currentIndex); 
  td1.innerHTML = count; 
 
  var currentCell = currentRow.insertCell(-1); 
  currentCell.appendChild(td1); 
 
  currentCell = currentRow.insertCell(-1); 
  currentCell.appendChild(valinRuss); 
 
  currentCell = currentRow.insertCell(-1); 
  currentCell.appendChild(valinEng); 
 
  currentCell = currentRow.insertCell(-1); 
  currentCell.appendChild(valinKaz); 
   
  count++; 
} 
 
document.getElementsByClassName('button')[0].onclick = function(){ 
  addField(); 
}

<table id="mineTable"> 
    <tr> 
        <th>Заголовок1</th> 
    </tr> 
    <tr> 
    <input type="button" class="button" value="+"> 
    </tr> 
    <tr> 
        <td></td> 
        <td>Знач 1</td> 
        <td>Знач 2</td> 
        <td>Знач 3</td> 
    </tr> 
        <tr> 
            <td name="td1">1</td> 
            <td><textarea name="valinRuss">123</textarea></td> 
            <td><textarea name="valinEng"></textarea></td> 
            <td><textarea name="valinKaz"></textarea></td> 
        </tr> 
    </table>