JavaScriptを使用してテーブル行のインデックスを更新する

行が削除されたときにテーブルの行番号が更新されるようにしたいのですが、既存のコードでどうすればいいですか？以下は私のコードです。 https://jsfiddle.net/arminemash/dkg6dnf6/2/JavaScriptを使用してテーブル行のインデックスを更新する

<body onload="setTimeout('myFunction()', 500)"> 
    <div> 
    <table id="myTable" border='1px'> 
     <tr> 
      <th>N</th> 
      <th>Name</th> 
      <th>Surname</th> 
      <th>tel.</th> 
      <th>email</th> 
     </tr> 
     <tr> 
      <td><button>add</button></td> 
     </tr> 
    </table>  
</div> 
</body> 

var arr=[['a','b','c','d'],['e','f','g','h'],['i','j','k','l'], ['m','n','o','p'],['q','r','s','t'],['u','v','w','x']]; 

function myFunction() { 
    createTable(); 
} 

function createTable(){ 
    var i,j,row; 
    var table = document.getElementById("myTable"); 
    for(i=1; i<arr.length; i++){ 
     row = table.insertRow(i); 
     for(j=0; j<6; j++){ 
      var cell = row.insertCell(j);  
     }  
     table.rows[i].cells[0].innerHTML=i; 
     table.rows[i].cells[5].innerHTML='<input type="button" value="delete" onclick="deleteRow(this)">'; 
    } 
    } 

function deleteRow(r) { 
    var i = r.parentNode.parentNode.rowIndex; 
    document.getElementById("myTable").deleteRow(i); 
}

出典

2016-06-26 Armine

私は、CSSのソリューションを選ぶだろう。ちょうどあなたのCSSに以下を追加：

table { 
    counter-reset: rowNumber; 
} 

table tr:not(:first-child){ 
    counter-increment: rowNumber; 
} 

table tr td:first-child::before { 
    content: counter(rowNumber); 
    min-width: 1em; 
    margin-right: 0.5em; 
}

ここにリンクされていますFiddle link

クリーンソリューション：https://jsfiddle.net/jLe2wggx/

出典

2016-06-26 07:44:35

JavaScriptの行カウンタのカウンタを削除し、ボタンを移動するには、そのテーブル –

から「追加」あなたの助けをありがとう。それは非常にinteresingソリューションです。私はそれが好きですが、わずかな問題があります、最後の行はインデックスを持っていけません。これは私のために私はその問題を解決するためにplse私を助けることができますか？ – Armine

どうすればいいですか： [すべての変更後のリンク]（https://jsfiddle.net/jLe2wggx/） –

JavaScriptを使用してテーブル行のインデックスを更新する

答えて

関連する問題