如何使用javascript計算動態創建的行上的行數

我想創建一個系統，我可以創建新行並將其刪除，我想要一個計數器來計算每行的行數。如何使用javascript計算動態創建的行上的行數

在「數字」下我想要顯示行數，但我不知道如何去做。

編輯

我發現一個jQuery的片段，似乎算我的第一行，而不是新創建的。
更新撥弄jQuery的片斷
與段更新JS代碼的前

見我的小提琴這裏：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); 
    } 
}

來源

2016-01-13 Oliver B. Schrøder

你可以得到錶行的長度（計數），通過使用

table.getElementsByTagName("tr").length

這將讓伯爵在其他的答案說，你可以把它變成你產生p標籤的HTML調用element1.innerHTML = table.getElementsByTagName("tr").length

我也建議在頁面初始化時運行您的newRow()函數，而不需要預設tr。當插入一行時，行的數量也會有所幫助，因此它總是在之前插入的行之後插入一行，並使Num.列保持良好且乾淨。

退房這個更新的提琴：https://jsfiddle.net/pr05dw6p/19/

來源

2016-01-13 14:51:20 Matholomew

謝謝！這無疑是在尋找什麼。 –

要計算的行可以使用：

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

可以在NEWROW（）和deleteRow（的末端稱之爲）的結果例如附加到一個div。

來源

2016-01-13 14:34:37 leguano

看到問題的代碼和標籤。OP不使用jQuery。 – undefined

我已經更新了標籤來包含JQuery，我忘了把它放在更早的地方。 –

我們需要做以下修改：

在HTML中添加1爲默認值在P標籤

在JavaScript代碼中，我們需要計算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); 
}

來源

2016-01-13 14:58:53

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

稱此爲後添加和刪除行功能

來源

2016-01-18 08:36:09 Aswathy

如何使用javascript計算動態創建的行上的行數

回答

相關問題