テーブルから行を削除し、私はその行</p> <p>に削除するには、テーブルの各行に配置するボタンを作成しようとしている

Question

テーブルにインデックス付け直し、それは自己のJavaScript上で作成されるテーブルの行ここでは、ランタイム

function createrow(){ 

    document.getElementById('totaltd').innerHTML = total; 

    var table = document.getElementById('baskettbl'); 
    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 
    var cell2 = row.insertCell(0); 
    cell2.innerHTML='<a href="" onclick="removerow('+rowCount+'); return false;">deleterow</a>'; 

    var cell2 = row.insertCell(1); 
    cell2.innerHTML='price'; 

    var cell3 = row.insertCell(2); 
    cell3.innerHTML='name'; 

} 

は私の削除行関数は、私がremoverowを定義cuzの私の問題は、私は、行を削除すると、その行は、私のテーブルの中央にある場合、それはめちゃくちゃにインデックスを意志である

function removerow(i){  
    var table = document.getElementById('baskettbl'); 
    table.deleteRow(i); 
} 

ですar私は5行を持っていると、私は行を削除する場合は[3]私は4行で終わるだろうように、各行に

var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 
    var cell2 = row.insertCell(0); 
    cell2.innerHTML='<a href="" onclick="removerow('+rowCount+'); return false; /> 

をクリートが、私の最後の行のボタンはまだremoverow関数に5を渡すために起こっているgumentともちろん何の行が存在しない[5]

をので、私は単に

function removerow(i){ 

    var table = document.getElementById('baskettbl'); 
     table.deleteRow(i); 
    } 
    var rowCount = table.rows.length; 

     for(i=0 , i<= rowCount ; i++){ 
    var cell = 'cell'+i; 
     cell.innerHTML='<a href="" onclick="removerow('+0+'); return false; /> 
     } 

によってインデックスにすべての行を再必要があると思ったけど、私は自分を変えることができるので、数値ホエーでTD IDを設定する必要がありますこのようなinnerhtml ここに私の質問です：

1.作成したtdにidのような属性を設定すると、後でその値を取得できますか？ + x.rowIndex：ここで私は

var cell2 = row.insertCell(0); 

2.I（x）は { 警告（ "行のインデックスである" 明らかに行インデックス

機能removerowを返すrowIndexプロパティプロパティについてfindoutそれらを作成する方法であります）; } 私は仕事を簡単にするため、すべてのインデックスを再作成する必要はありませんが、どのようにクリックした行「this」を関数に渡すことができますか？ここで私は、インデックス

var cell2 = row.insertCell(0); 
cell2.innerHTML='<a href="" onclick="removerow('+rowCount+'); /> 

に合格し、また、私はDreamweaverのCS5を使用して、rowIndexに

Answer 1

その後、動的にインデックスを取得し、あなたがそれを作成するときにそれを設定しない：JavaScriptを経由してクリックイベントハンドラを設定する

function createrow(){ 
    document.getElementById('totaltd').innerHTML = total; 

    var table = document.getElementById('baskettbl'), 
     rowCount = table.rows.length, 
     row = table.insertRow(rowCount), 
     cell = row.insertCell(0), 
     a = document.createElement('a'); 

    a.href = '#'; 
    a.innerHTML = 'deleterow'; 
    a.onclick = function() { 
     // `this` refers to the `a` element. 
     removerow(this.parentNode.parentNode.rowIndex); 
     return false; 
    }; 

    cell.appendChild(a); 

    cell = row.insertCell(1); 
    cell.innerHTML='price'; 

    cell = row.insertCell(2); 
    cell.innerHTML='name'; 

    // still needed for IE memory leak? Don't know... 
    table = row = cell = a = null; 
}; 

はとにかく読みやすくている（まあ、あなたもちょうどthis.parentNode....を使用することができますHTML文字列に）。

---

上記のコードは、あなたが望むことを行う必要があります（ご質問がある場合はコメントのみ）。それにもかかわらず、私はあなたの質問に答えたいと思った：

私は後でそれらの値を得ることができるように、作成されたtdにidのような属性を設定する方法はありますか？

知るべき重要なことは、HTMLとDOMプロパティ属性との間に差があるということです。 These answers describe it quite wellですが、もともとはjQueryについてですが（それは関係ありません）。

とにかく、あなたはすでにinnerHTMLを設定する方法を知っているとあなたがidのためにとても似て行うことができます。

cell.id = "something"; 

はDOM element referenceを見てください。

しかし、どのように私は、多かれ少なかれ上記のコードでこれを示した機能

に「この」をクリックした行を渡すことができます。イベントハンドラの内部では、thisは、イベントをバインドした要素を参照します。我々はそれがtd要素の子であり、それ自体がtr要素の子であるa要素であることを知っています。対応する行を取得するには、this.parentNode.parentNodeにアクセスしてください。

---

JavaScriptに関する詳細については、have a look at the javascript tag information pageを参照してください。ここでは、さまざまなJavaScript関連トピックの紹介に役立つリンクがたくさんあります。
特にarticles about event handling at quirksmode.orgをご覧ください。

Answer 2

が、私はこれがあなたの役に立てば幸い、これを試してみてください認識しているようだしない方法です。

function createrow(){ 

     document.getElementById('totaltd').innerHTML = total; 

     var table = document.getElementById('baskettbl'); 
     var rowCount = table.rows.length; 
     var row = table.insertRow(rowCount); 
     row.id = "row_"+rowCount; 
     var cell2 = row.insertCell(0); 
     cell2.innerHTML='<a href="" onclick="removerow('+rowCount+'); return false;">deleterow</a>'; 

     var cell2 = row.insertCell(1); 
     cell2.innerHTML='price'; 

     var cell3 = row.insertCell(2); 
     cell3.innerHTML='name'; 

    } 




function removerow(i){  
    var table = document.getElementById('baskettbl'); 
    table.removeChild(document.getElementById("row_"+i)); 
}