Как добавить числа перед каждой строкой таблицы в javascript?

Question

Я пытаюсь добавить числа перед каждой строкой таблицы, когда добавляю новую строку через форму, поэтому все добавленные строки нумеруются. Это код, который я использую для добавления строк, который работает. Кто-нибудь знает, как сделать добавление нового <td> в таблицу?

var btn = document.getElementById('btn');
btn.onclick = myFunction;

function myFunction() {
    validateForm()
    addRow()
}


function addRow() {
    //Get data from filled in form
    var form = document.getElementById('form');
    var newData = [];
    for(var i = 0; i < form.length; i++) {
        newData[i] = form.elements[i].value;
    }

    if(validateForm() == true) {
        //Put data in table
        var table = document.getElementById('table');
        var newRow = table.insertRow();

        for(var i = 0; i < 3; i++) {
        var newCell = newRow.insertCell(i);
        newCell.innerHTML = newData[i];
        }
    }

    form.reset();
}


function validateForm() {
    var f = document.getElementById('form');

    if(f.fname.value == '') {
        alert('Please fill in first name');
        return false;
    }
    if(f.lname.value == '') {
        alert('Please fill in last name');
        return false;
    }
    if(f.points.value == '') {
        alert('Please fill in points');
        return false;
    }
    if(isNaN(f.points.value)) {
        alert('Points should be a number')
        return false
    }

    return true;

}

Answer 1

Вы можете найти текущее количество строк в таблице, а затем добавить 1 к этому и добавить его в новую строку.

Количество строк в таблице можно найти по

const table = document.getElementById("myTable");
const numOfRows = table.getElementsByTagName('tr');
console.log(numOfRows.length);

Обновленный метод addRow() будет иметь вид

function addRow() {
    //Get data from filled in form
    var form = document.getElementById('form');
    var newData = [];
    for(var i = 0; i < form.length; i++) {
        newData[i] = form.elements[i].value;
    }

    if(validateForm() == true) {
        //Put data in table
        var table = document.getElementById('table');
        const rows = table.getElementsByTagName('tr');
        const currentRow = rows.length + 1;

        var newRow = table.insertRow();
        const firstCell = newRow.insertCell(0);
        firstCell.innerHTML = currentRow;
        for(var i = 1; i <= 3; i++) {
          var newCell = newRow.insertCell(i);
          newCell.innerHTML = newData[i];
        }
    }

    form.reset();
}

jsfiddle demo https://jsfiddle.net/m9rh1uvw/

Answer 2

Этот код может решить вашу проблему.

var btn = document.getElementById('btn');
btn.onclick = myFunction;

function myFunction() {
    validateForm()
    addRow()
}
 var rowNumber = 0;

function addRow() {
 
    //Get data from filled in form
    var form = document.getElementById('form');
    var newData = [];
    for(var i = 0; i < form.length; i++) {
       newData[i] = form.elements[i].value;
    }

    if(validateForm() == true) {
    rowNumber++;
        //Put data in table
      
        var table = document.getElementById('table');
        var newRow = table.insertRow();
      
        newRow.innerHTML = `<tr><td>${rowNumber}</td></tr>`;
      
        for(var i = 0; i < 3; i++) {
          newRow.innerHTML += `<tr><td>${newData[i]}</td></tr>`;
        }
    }
    form.reset();
}


function validateForm() {
    var f = document.getElementById('form');

    if(f.fname.value == '') {
        alert('Please fill in first name');
        return false;
    }
    if(f.lname.value == '') {
        alert('Please fill in last name');
        return false;
    }
    if(f.points.value == '') {
        alert('Please fill in points');
        return false;
    }
    if(isNaN(f.points.value)) {
        alert('Points should be a number')
        return false
    }

    return true;

}

input[type="text"] {
  padding:10px;
  font-size:16px;
}
#btn {
  padding:15px 25px;
  border: 0;
  background: #f90;
  color: #fff;
  border-radius: 3px;
  font-size:16px;
  cursor: pointer;
  margin: 20px auto;
}
#table tr td {
  font-size: 16px;
  padding: 10px 20px;
  border: 2px solid #000;
  font-family: sans-serif;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <form action="" id="form">
    <input type="text" name="fname" placeholder="Fname">
    <input type="text" name="lname" placeholder="Lname">
    <input type="text" name="points" placeholder="Points">
  </form>
  <button id="btn">Add Row</button>
  <table id="table"></table>
</body>
</html>