如何從動態html表中獲取行數？

Question

每當用戶完成表單時，我都會添加一個空的tbody。 最終這個表數據將存儲在一個數據庫中，但現在卻不是。 這是我的表設置：

<div class="formContainer">
        <form id="form1">
          <b>Step Number: </b><input type="number" id = "theStep" name="step" required></br>
          <b>First Name: </b> <input type="text" name="firstName" required></br>
          <b>Last Name: </b><input type="text" name="lastName" required></br>
          <b>Alias: </b><input type="text" name="alias" required></br>
          <b>Today's Date: </b><input type="date" id="theDate" name="submitDate" required></br>
          <input type="submit" name="sub" value="submit">
        </form>
      </div>

      <h2>Step Approvals</h2>
      <div class="table-responsive">
        <table id="stepTable" class="table table-striped table-sm">
          <thead>
            <tr>
              <td>Step</td>
              <td>First Name</td>
              <td>Last Name</td>
              <td>Alias</td>
              <td>Submission Date</td>
            </tr>
          </thead>
          <tbody id="displayArea"></tbody>
        </table>
      </div>

我想用條目號自動填寫表單，所以我試圖通過計算表中的行數來跟蹤有多少條目。 這是我嘗試過的，但即使我向表中添加條目/行，它也只給了我一個'null'值：

var setStep = $('#stepTable > tbody >tr').length;
  if (setStep = 'null') {
    $("#theStep").attr("value", 1)
  } else {
    $("#theStep").attr("value", setStep + 1)
    };

每次切換表單時，都應使用表格+ 1中的行數更新“步驟”字段。

Answer 1

您可以使用document.getElementById("myTable").rows.length獲取表的行號document.getElementById("myTable").rows.length

 var rowCount = document.getElementById("myTable").rows.length; // For rows var colCount = document.getElementById("myTable").rows[0].cells.length; // For columns document.getElementById("count").innerHTML = "ROW COUNT: " + rowCount; document.getElementById("count").innerHTML += "<br/>COL COUNT: " + colCount; 

 <table id="myTable" border="1"> <tr> <td> ROW 1 </td> </tr> <tr> <td> ROW 2 </td> </tr> </table> <div id="count"></div>