如何使用 javascript 计算动态创建的行的行数

Question

我正在尝试创建一个系统，我可以在其中创建新行并删除它们，我想要一个计数器来计算每一行的行号。

在 "Num" 下，我想显示行号，但我不知道该怎么做。

编辑

我发现了一个 jQuery 代码段，它似乎计算了我的第一行，但没有计算新创建的行。
使用 jQuery 代码段
更新了 JS 代码，在顶部添加了片段

在这里查看我的 fiddle：https://jsfiddle.net/pr05dw6p/14/

HTML代码：

<div class="row">
    <div class="large-8 large-offset-2 columns">
        <h2>This is the table</h2>
            <form method="post">
                <table id="myTable" class="hover large-12 columns">
                  <thead>
                    <tr>
                      <th>Num.</th>
                      <th>Name</th>
                      <th>Height</th>
                      <th>Width</th>
                    </tr>
                  </thead>
                  <tbody id="bannerTable">
                    <tr>
                      <td><p></p></td>                      
                      <td><input type="text" name="name"></td>
                      <td><input type="number" name="height"></td>
                      <td><input type="number" name="width"></td>
                    </tr>
                  </tbody>
                </table>
            </form>
    </div>    
</div>         

<div class="row">
    <div class="large-4 large-offset-2 columns">
        <button class="button expanded" onclick="newRow()">Add new row</button>
    </div>
    <div class=" large-4 columns">
        <button class="alert button expanded" onclick="deleteRow()">Delete latest row</button>
    </div>
</div>

JS代码：

//CREATE NEW BANNER - TABLE ROW COUNTER
$('#bannerTable tr').each(function(idx){
    $(this).children().first().html(idx + 1);
});


//CREATE NEW BANNER - CREATE ROW
function newRow() {
    var table = document.getElementById("bannerTable");
    var row = table.insertRow(1);

    var cell1 = row.insertCell(0);    
    var element1 = document.createElement('p');
        cell1.appendChild(element1); 

    var cell2 = row.insertCell(1);
    var element2 = document.createElement('input');
        element2.type="text", name="name";
        cell2.appendChild(element2);   

    var cell3 = row.insertCell(2);
    var element3 = document.createElement('input');
        element3.type="number", name="height";
        cell3.appendChild(element3);   

    var cell4 = row.insertCell(3);
    var element4 = document.createElement('input');
        element4.type="number", name="width";
        cell4.appendChild(element4);   
}

//CREATE NEW BANNER - DELETE ROW
function deleteRow(){
    var table = document.getElementById("bannerTable");
    var rowCount = table.rows.length;

    if(rowCount>1){            
        table.deleteRow(-1);
    }
}

Answer 1

要计算行数，您可以使用：

var row_count = $('#bannerTable tr').length;

您可以在 newRow() 和 deleteRow() 的末尾调用它并追加结果，例如div.

Answer 2

您可以使用

获取其他答案中所述的 table 行的长度（计数）

table.getElementsByTagName("tr").length

这将获取计数，您可以通过调用 element1.innerHTML = table.getElementsByTagName("tr").length

将其放入生成的 p 标记的 html 中

我还建议运行您的 newRow() 页面初始化函数没有预设 tr。当您插入一行时，行数也将有所帮助，以便它始终在先前插入的行之后插入一行，并保持 Num. 列整洁。

查看更新后的 fiddle：https://jsfiddle.net/pr05dw6p/19/

Answer 3

我们需要进行以下更改：

在P标签HTML中添加1作为默认值

在Javascript代码中我们需要计算table的TR并将其值放入table.insertRow(row_count);之后我们需要增加值并将其添加到新的 <P> 标签。

                 <tbody id="bannerTable">
                    <tr>
                      <td><p>1</p></td>                      
                      <td><input type="text" name="name"></td>
                      <td><input type="number" name="height"></td>
                      <td><input type="number" name="width"></td>
                    </tr>
                  </tbody>

Javascript代码

//CREATE NEW BANNER - CREATE ROW
function newRow() {
    var table = document.getElementById("bannerTable");
    var row_count = document.getElementById("bannerTable").rows.length;    
    var row = table.insertRow(row_count);
    row_count = row_count+1;

    var cell1 = row.insertCell(0);     
    var element1 = document.createElement('p');
            element1.innerHTML = row_count;
        cell1.appendChild(element1); 

    var cell2 = row.insertCell(1);
    var element2 = document.createElement('input');
        element2.type="text", name="name";
        cell2.appendChild(element2);   

    var cell3 = row.insertCell(2);
    var element3 = document.createElement('input');
        element3.type="number", name="height";
        cell3.appendChild(element3);   

    var cell4 = row.insertCell(3);
    var element4 = document.createElement('input');
        element4.type="number", name="width";
        cell4.appendChild(element4);   
}

Answer 4

var row_count = $('#myTable tbody tr').length.length;

在增删行函数后调用

如何使用 javascript 计算动态创建的行的行数

How to count rows on dynamically created rows with javascript

html

javascript

jquery

counter

row