如何从动态 html 表中获取行数？答案

【问题标题】：How to get the count of rows from a dynamic html table?如何从动态 html 表中获取行数？
【发布时间】：2019-06-18 19:31:48
【问题描述】：

每当用户完成表单时，我都会添加一个空的 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>

我想用条目号自动填写表格，所以我试图通过计算表中的行数来跟踪有多少条目。这是我尝试过的，但即使在我向表中添加条目/行之后，它也只会给我一个“空”值：

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

每次我切换表单时，“步骤”字段都应该更新为表格中的行数 + 1。

【问题讨论】：

.length 返回一个整数，所以setStep 不应该等于'null'，= 也用于赋值，== 或=== 用于比较。这是if (setStep = 'null')的问题，您将'null'的值分配给setStep，它需要与==或===进行比较
@JM2397 欢迎来到 Stackoverflow。你应该花时间提交一个没有太多错误的问题。我们应该从哪里开始？您在 JS 代码中引用的 ID 在 HTML 中不存在，那么您希望它做什么？
@caramba 是我的错，是堆栈的新手和一般的编码新手。我包含了 html 的表单部分，其中应该包含我引用的 ID。
@JM2397 我在之前的评论中给了你答案。

标签： javascript jquery html

【解决方案1】：

您可以使用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>

【讨论】：