如何在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() {&nbsp; &nbsp; //Get data from filled in form&nbsp; &nbsp; var form = document.getElementById('form');&nbsp; &nbsp; var newData = [];&nbsp; &nbsp; for(var i = 0; i < form.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; newData[i] = form.elements[i].value;&nbsp; &nbsp; }&nbsp; &nbsp; if(validateForm() == true) {&nbsp; &nbsp; &nbsp; &nbsp; //Put data in table&nbsp; &nbsp; &nbsp; &nbsp; var table = document.getElementById('table');&nbsp; &nbsp; &nbsp; &nbsp; const rows = table.getElementsByTagName('tr');&nbsp; &nbsp; &nbsp; &nbsp; const currentRow = rows.length + 1;&nbsp; &nbsp; &nbsp; &nbsp; var newRow = table.insertRow();&nbsp; &nbsp; &nbsp; &nbsp; const firstCell = newRow.insertCell(0);&nbsp; &nbsp; &nbsp; &nbsp; firstCell.innerHTML = currentRow;&nbsp; &nbsp; &nbsp; &nbsp; for(var i = 1; i <= 3; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var newCell = newRow.insertCell(i);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; newCell.innerHTML = newData[i];&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; form.reset();}jsfiddle 演示https://jsfiddle.net/m9rh1uvw/

Answer 2

此代码可能会解决您的问题。var btn = document.getElementById('btn');btn.onclick = myFunction;function myFunction() {&nbsp; &nbsp; validateForm()&nbsp; &nbsp; addRow()}&nbsp;var rowNumber = 0;function addRow() {&nbsp;&nbsp; &nbsp; //Get data from filled in form&nbsp; &nbsp; var form = document.getElementById('form');&nbsp; &nbsp; var newData = [];&nbsp; &nbsp; for(var i = 0; i < form.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp;newData[i] = form.elements[i].value;&nbsp; &nbsp; }&nbsp; &nbsp; if(validateForm() == true) {&nbsp; &nbsp; rowNumber++;&nbsp; &nbsp; &nbsp; &nbsp; //Put data in table&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; var table = document.getElementById('table');&nbsp; &nbsp; &nbsp; &nbsp; var newRow = table.insertRow();&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; newRow.innerHTML = `<tr><td>${rowNumber}</td></tr>`;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; for(var i = 0; i < 3; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; newRow.innerHTML += `<tr><td>${newData[i]}</td></tr>`;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; form.reset();}function validateForm() {&nbsp; &nbsp; var f = document.getElementById('form');&nbsp; &nbsp; if(f.fname.value == '') {&nbsp; &nbsp; &nbsp; &nbsp; alert('Please fill in first name');&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; }&nbsp; &nbsp; if(f.lname.value == '') {&nbsp; &nbsp; &nbsp; &nbsp; alert('Please fill in last name');&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; }&nbsp; &nbsp; if(f.points.value == '') {&nbsp; &nbsp; &nbsp; &nbsp; alert('Please fill in points');&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; }&nbsp; &nbsp; if(isNaN(f.points.value)) {&nbsp; &nbsp; &nbsp; &nbsp; alert('Points should be a number')&nbsp; &nbsp; &nbsp; &nbsp; return false&nbsp; &nbsp; }&nbsp; &nbsp; return true;}input[type="text"] {&nbsp; padding:10px;&nbsp; font-size:16px;}#btn {&nbsp; padding:15px 25px;&nbsp; border: 0;&nbsp; background: #f90;&nbsp; color: #fff;&nbsp; border-radius: 3px;&nbsp; font-size:16px;&nbsp; cursor: pointer;&nbsp; margin: 20px auto;}#table tr td {&nbsp; font-size: 16px;&nbsp; padding: 10px 20px;&nbsp; border: 2px solid #000;&nbsp; font-family: sans-serif;}<!DOCTYPE html><html><head>&nbsp; <meta charset="UTF-8">&nbsp; <meta name="viewport" content="width=device-width, initial-scale=1.0">&nbsp; <meta http-equiv="X-UA-Compatible" content="ie=edge">&nbsp; <title>Document</title></head><body>&nbsp; <form action="" id="form">&nbsp; &nbsp; <input type="text" name="fname" placeholder="Fname">&nbsp; &nbsp; <input type="text" name="lname" placeholder="Lname">&nbsp; &nbsp; <input type="text" name="points" placeholder="Points">&nbsp; </form>&nbsp; <button id="btn">Add Row</button>&nbsp; <table id="table"></table></body></html>