Question

我有一个空的正文，每当用户填写表格时都会添加到其中。最终，该表数据将存储在数据库中，但现在还没有。这是我的表格设置：

<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)
    };

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

Answer 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>

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

1 个答案: