如何使用 Javascript 将数字动态添加到第一个单元格答案

【问题标题】：How to add a number dynamically with Javascript to the first cell如何使用 Javascript 将数字动态添加到第一个单元格
【发布时间】：2019-08-19 12:13:51
【问题描述】：

我正在学习 Javascript，但现在我被困住了。当用户输入他们的名字、姓氏、年龄并单击“添加”按钮时，将使用用户输入的值将 1 个新行和 4 个新单元格添加到表中。

我的问题是：如何让第一个单元格成为数字？在这种情况下应该是数字 4。如果用户添加另一行值，它应该成为数字 5。等等。

如果有人可以为我指明一个方向或向我展示另一种方法，那将有所帮助。谢谢！（添加 CSS 仅用于视觉效果）

function allID(id) {
    return document.getElementById(id);
}

function allEvents() {
    allID("voegdatatoe").onclick = function () {
            voegToeGegevens();
    };
}

allEvents();

function voegToeGegevens() {
    var formulier = allID("invoerformulier");
    var nieuweGegevens = [];
    for (var i = 0; i < formulier.length; i++) {
        nieuweGegevens[i] = formulier.elements[i].value;
    }

    var uitvoertabel = allID("uitvoertabel");
    var nieuweRij = uitvoertabel.insertRow(-1);
    for (i = 0; i < 4; i++) {
        var NieuweCell = nieuweRij.insertCell(i);
        NieuweCell.innerHTML = nieuweGegevens[i];
    }
}

var row = document.getElementsByClassName("rownmr");
var i = 0;

for (i = 0; i < row.length; i++) {
    row[i].innerHTML = i + 1;
}

table,
th,
td {
	border-collapse: collapse;
	border: 1px solid black;
}

th,
td {
	padding: 5px;
}

th {
	text-align: left;
	background-color: #c95050;
	color: white;
}

.uitvoertabel {
	width: 60%;
}

.uitvoertabel tr:nth-child(even) {
	background-color: #eee;
}

.uitvoertabel tbody tr td:first-child {
	width: 30px;
}

.invoerform {
	margin-top: 50px;
	width: 30%;
}

.invoerform input,
label {
	display: block;
}

.invoerform label {
	margin-bottom: 5px;
	margin-top: 10px;
}

#voegdatatoe {
	margin-top: 30px;
}

input:focus {
	border: 1px solid #d45757;
	outline: none;
}

<table class="uitvoertabel" id="uitvoertabel">
   <thead>
      <tr>
         <th></th>
         <th>Voornaam</th>
         <th>Achternaam</th>
         <th>Leeftijd</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td class="rownmr"></td>
         <td>Johan</td>
         <td>cruijff</td>
         <td>54</td>
      </tr>
      <tr>
         <td class="rownmr"></td>
         <td>Frans</td>
         <td>Bauer</td>
         <td>47</td>
      </tr>
      <tr>
         <td class="rownmr"></td>
         <td>Willem</td>
         <td>van Oranje</td>
         <td>80</td>
      </tr>
   </tbody>
</table>
<form action="" id="invoerformulier" class="invoerform">
   <label>Voornaam:</label>
   <input type="text" name="vnaam" id="voornaam">
   <label>Achternaam:</label>
   <input type="text" name="anaam" id="achternaam">
   <label>Leeftijd:</label>
   <input type="text" name="points" id="leeftijd">
</form>
<button id="voegdatatoe">Voeg toe</button>

【问题讨论】：

标签： javascript html-table row

【解决方案1】：

我注意到没有任何答案，似乎没有得到 Niekket 的批准（对任何人都没有验证），
并且提出的问题伴随着一个非常粗略的例子（作者承认在他的学徒期间被阻止了），使用了很多无用的代码......

所以我提出了这个完整的解决方案，我希望它对正确编码问题的方法有足够的启发（恕我直言）。

const
  TableBody_uitvoertabel = document.querySelector('#uitvoertabel > tbody'),
  form_invoerformulier   = document.querySelector('#invoerformulier'),
  in_voornaam     = document.querySelector('#voornaam'),
  in_achternaam   = document.querySelector('#achternaam'),
  in_leeftijd     = document.querySelector('#leeftijd')
  ;

var
  RowCount = 0; // global..

// place numbers in the first column
document.querySelectorAll('#uitvoertabel > tbody > tr td:first-child').forEach(
  elmTR=>{ elmTR.textContent = ++RowCount }
);

form_invoerformulier.onsubmit = function(e) {
  e.preventDefault();

  let
    column = 0,
    row    = TableBody_uitvoertabel.insertRow(-1)
    ;
  row.insertCell(column++).textContent = ++RowCount;
  row.insertCell(column++).textContent = in_voornaam.value;
  row.insertCell(column++).textContent = in_achternaam.value;
  row.insertCell(column++).textContent = in_leeftijd.value;

  this.reset();
}

table, th, td {
	border-collapse: collapse;
	border: 1px solid black;
}

th, td { padding: 5px; }
th {
	text-align: left;
	background-color: #c95050;
	color: white;
}

table.uitvoertabel { width: 60%; }

table.uitvoertabel tr:nth-child(even) {
	background-color: #eee;
}

table.uitvoertabel tbody tr td:first-child {
	width: 30px;
}

form.invoerform {
	margin-top: 50px;
	width: 30%;
}

form.invoerform input,
form.invoerform label {
	display: block;
}

form.invoerform label {
	margin-bottom: 5px;
	margin-top: 10px;
}

form.invoerform button {
	margin-top: 30px;
}

form.invoerform  input:focus {
	border-color:  #d45757;
	outline: none;
}

<table class="uitvoertabel" id="uitvoertabel">
  <thead>
      <tr>
        <th></th><th>Voornaam</th><th>Achternaam</th><th>Leeftijd</th>
      </tr>
  </thead>
  <tbody>
      <tr>
        <td></td><td>Johan</td><td>cruijff</td><td>54</td>
      </tr>
      <tr>
        <td></td><td>Frans</td><td>Bauer</td><td>47</td>
      </tr>
      <tr>
        <td></td><td>Willem</td><td>van Oranje</td><td>80</td>
      </tr>
  </tbody>
</table>

<form id="invoerformulier" class="invoerform">
  <label>Voornaam:</label>
  <input type="text" name="vnaam" id="voornaam">
  <label>Achternaam:</label>
  <input type="text" name="anaam" id="achternaam">
  <label>Leeftijd:</label>
  <input type="text" name="points" id="leeftijd">

  <button type="submit">Voeg toe</button>
  <button type="reset">Reset</button>
</form>

【讨论】：

对不起！我无法立即测试答案，但当我看到 Scott Sauyet 的答案时，我赞成他的答案！

【解决方案2】：

在数据数组中添加额外的 length+1 参数

function allID(id) {
    return document.getElementById(id);
}

function allEvents() {
    allID("voegdatatoe").onclick = function () {
            voegToeGegevens();
    };
}

allEvents();

function voegToeGegevens() {
var row = document.getElementsByTagName("tr");
    var formulier = allID("invoerformulier");
    var nieuweGegevens = [];
    nieuweGegevens.push(row.length) //length param for first column
    for (var i = 0; i < formulier.length; i++) {
        nieuweGegevens[i+1] = formulier.elements[i].value; //saving values from i=1

    }

    var uitvoertabel = allID("uitvoertabel");
    var nieuweRij = uitvoertabel.insertRow(-1);
    for (i = 0; i < 4; i++) {
        var NieuweCell = nieuweRij.insertCell(i);
        NieuweCell.innerHTML = nieuweGegevens[i];
    }
}

var row = document.getElementsByClassName("rownmr");
var i = 0;

for (i = 0; i < row.length; i++) {
    row[i].innerHTML = i + 1;
}

table,
th,
td {
	border-collapse: collapse;
	border: 1px solid black;
}

th,
td {
	padding: 5px;
}

th {
	text-align: left;
	background-color: #c95050;
	color: white;
}

.uitvoertabel {
	width: 60%;
}

.uitvoertabel tr:nth-child(even) {
	background-color: #eee;
}

.uitvoertabel tbody tr td:first-child {
	width: 30px;
}

.invoerform {
	margin-top: 50px;
	width: 30%;
}

.invoerform input,
label {
	display: block;
}

.invoerform label {
	margin-bottom: 5px;
	margin-top: 10px;
}

#voegdatatoe {
	margin-top: 30px;
}

input:focus {
	border: 1px solid #d45757;
	outline: none;
}

<table class="uitvoertabel" id="uitvoertabel">
   <thead>
      <tr>
         <th></th>
         <th>Voornaam</th>
         <th>Achternaam</th>
         <th>Leeftijd</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td class="rownmr"></td>
         <td>Johan</td>
         <td>cruijff</td>
         <td>54</td>
      </tr>
      <tr>
         <td class="rownmr"></td>
         <td>Frans</td>
         <td>Bauer</td>
         <td>47</td>
      </tr>
      <tr>
         <td class="rownmr"></td>
         <td>Willem</td>
         <td>van Oranje</td>
         <td>80</td>
      </tr>
   </tbody>
</table>
<form action="" id="invoerformulier" class="invoerform">
   <label>Voornaam:</label>
   <input type="text" name="vnaam" id="voornaam">
   <label>Achternaam:</label>
   <input type="text" name="anaam" id="achternaam">
   <label>Leeftijd:</label>
   <input type="text" name="points" id="leeftijd">
</form>
<button id="voegdatatoe">Voeg toe</button>

【讨论】：

请注意一个重要的问题：当您添加第二个新条目时，它也会获得值 4。

【解决方案3】：

有很多方法可以存储这些信息，从全局变量（不推荐）到某个局部闭包，甚至是 localStorage。但是你在 DOM 中有信息，所以使用它可能是最简单的。

执行此操作的一种方法是扫描 id，找到它们的最大值，然后添加一个。这涉及对您的代码进行一些更改。首先，我们将添加一些代码来扫描您的 id 单元格中的最大值：

        var rows = document.getElementsByClassName("rownmr");
        var highestId = Math.max(...([...rows].map(row => Number(row.textContent))))

然后我们将使用比最大值大一的新值开始您的内容数组：

        var nieuweGegevens = [highestId + 1];

您的循环需要通过在索引中添加一个来考虑这一点

        for (var i = 0; i < formulier.length; i++) {
            nieuweGegevens[i + 1] = formulier.elements[i].value;
        }

最后，我们需要将正确的类添加到该新单元格中，以便在下一次调用时，它将继续工作：

        for (i = 0; i < 4; i++) {
            var NieuweCell = nieuweRij.insertCell(i);
            NieuweCell.innerHTML = nieuweGegevens[i];
            if (i === 0) {                         /**** new ****/
                NieuweCell.classList.add("rownmr") /**** new ****/
            }                                      /**** new ****/ 
        }

你可以在这个 sn-p 中看到这些变化：

function allID(id) {
    return document.getElementById(id);
}

function allEvents() {
    allID("voegdatatoe").onclick = function () {
            voegToeGegevens();
    };
}

allEvents();

function voegToeGegevens() {
    var formulier = allID("invoerformulier");
    var rows = document.getElementsByClassName("rownmr");
    var highestId = Math.max(...([...rows].map(row => Number(row.textContent))))
    var nieuweGegevens = [highestId + 1];
    for (var i = 0; i < formulier.length; i++) {
        nieuweGegevens[i + 1] = formulier.elements[i].value;
    }

    var uitvoertabel = allID("uitvoertabel");
    var nieuweRij = uitvoertabel.insertRow(-1);
    for (i = 0; i < 4; i++) {
        var NieuweCell = nieuweRij.insertCell(i);
        NieuweCell.innerHTML = nieuweGegevens[i];
        if (i === 0) {
            NieuweCell.classList.add("rownmr")
        }
    }
}

var row = document.getElementsByClassName("rownmr");
var i = 0;

for (i = 0; i < row.length; i++) {
    row[i].innerHTML = i + 1;
}

table,
th,
td {
	border-collapse: collapse;
	border: 1px solid black;
}

th,
td {
	padding: 5px;
}

th {
	text-align: left;
	background-color: #c95050;
	color: white;
}

.uitvoertabel {
	width: 60%;
}

.uitvoertabel tr:nth-child(even) {
	background-color: #eee;
}

.uitvoertabel tbody tr td:first-child {
	width: 30px;
}

.invoerform {
	margin-top: 50px;
	width: 30%;
}

.invoerform input,
label {
	display: block;
}

.invoerform label {
	margin-bottom: 5px;
	margin-top: 10px;
}

#voegdatatoe {
	margin-top: 30px;
}

input:focus {
	border: 1px solid #d45757;
	outline: none;
}

<table class="uitvoertabel" id="uitvoertabel">
   <thead>
      <tr>
         <th></th>
         <th>Voornaam</th>
         <th>Achternaam</th>
         <th>Leeftijd</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td class="rownmr"></td>
         <td>Johan</td>
         <td>cruijff</td>
         <td>54</td>
      </tr>
      <tr>
         <td class="rownmr"></td>
         <td>Frans</td>
         <td>Bauer</td>
         <td>47</td>
      </tr>
      <tr>
         <td class="rownmr"></td>
         <td>Willem</td>
         <td>van Oranje</td>
         <td>80</td>
      </tr>
   </tbody>
</table>
<form action="" id="invoerformulier" class="invoerform">
   <label>Voornaam:</label>
   <input type="text" name="vnaam" id="voornaam">
   <label>Achternaam:</label>
   <input type="text" name="anaam" id="achternaam">
   <label>Leeftijd:</label>
   <input type="text" name="points" id="leeftijd">
</form>
<button id="voegdatatoe">Voeg toe</button>

请注意，这将继续适用于后续添加。

【讨论】：

【解决方案4】：

我认为主要问题是您第一次从var row = document.getElementsByClassName("rownmr"); 行手动设置rownmrs，而不是每次单击“Voeg toe”按钮时。

理想情况下，对于您的硬编码数字，它们将位于标记和逻辑中以获取下一个要显示的 rownmr，并在单击时添加该单元格。

html

<table class="uitvoertabel" id="uitvoertabel">
   <thead>
      <tr>
         <th></th>
         <th>Voornaam</th>
         <th>Achternaam</th>
         <th>Leeftijd</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td class="rownmr">1</td>
         <td>Johan</td>
         <td>cruijff</td>
         <td>54</td>
      </tr>
      <tr>
         <td class="rownmr">2</td>
         <td>Frans</td>
         <td>Bauer</td>
         <td>47</td>
      </tr>
      <tr>
         <td class="rownmr">3</td>
         <td>Willem</td>
         <td>van Oranje</td>
         <td>80</td>
      </tr>
   </tbody>
</table>
<form action="" id="invoerformulier" class="invoerform">
   <label>Voornaam:</label>
   <input type="text" name="vnaam" id="voornaam">
   <label>Achternaam:</label>
   <input type="text" name="anaam" id="achternaam">
   <label>Leeftijd:</label>
   <input type="text" name="points" id="leeftijd">
</form>
<button id="voegdatatoe">Voeg toe</button>

function allID(id) {
    return document.getElementById(id);
}

function allEvents() {
    allID("voegdatatoe").onclick = function () {
            voegToeGegevens();
    };
}

allEvents();

function voegToeGegevens() {
    var formulier = allID("invoerformulier");
    var nieuweGegevens = [];
    for (var i = 0; i < formulier.length; i++) {
        nieuweGegevens[i] = formulier.elements[i].value;
    }

    var allRownmrs = document.getElementsByClassName('rownmr');

    var lastRownmr = allRownmrs[allRownmrs.length - 1].innerHTML;

    var nextRownmr = parseInt(lastRownmr) + 1;

    var uitvoertabel = allID("uitvoertabel");
    var nieuweRij = uitvoertabel.insertRow(-1);
    for (i = 0; i < 4; i++) {

      var NieuweCell = nieuweRij.insertCell(i)

        // you probably can refactor here
        if (i === 0) {
          NieuweCell.innerHTML = nextRownmr
        } else {
          NieuweCell.innerHTML = nieuweGegevens[i - 1];
        }        
    }
}

【讨论】：