JavaScriptの動的インデックス設定

Question

ボタンをクリックすると動的に行を追加する必要があるテーブルがあります。各行には3つのテキストボックスとクリアボタンがあります。クリアをクリックすると、テキストボックス内のデータをクリアする必要があります。つまり、ボタンのonclickは、そのインデックスのテキストボックスの内容を削除するメソッドに行のインデックスを送信します。

問題 - 新しい行を追加する際に、行ボタンのonClickプロパティでインデックス番号を指定するにはどうすればよいですか？

Answer 1

イベントデリゲートを使用することをお勧めします。また、JavaScriptでthisを使用することもできます。

イベント委任jQueryの

<input class="clear-row-btn" type="button" >Clear Row</input> 

.liveイベント

$(".clear-row-btn").live("click", function(){ 
    var $tr = $(this).closest("tr"); 
    $tr.find("input[type='text']").val(""); 
}); 

HTMLのonclick/W方法

<input type="button" onclick="clearRow(this)" >Clear Row</input> 

のjQuery/W

function clearRow(btn) { 
    var $tr = $(btn).closest("tr"); 
    $tr.find("input[type='text']").val(""); 
} 

新しい行を追加しながら

JavaScriptの

function clearRow(element) { 

     while(element.nodeName!='TR'){ 
     element = element.parentNode; 
     } 

     //find textboxes inside the element, which is now the parent <tr>  
} 

Answer 2

は、どのように私は、行のボタンのonClickのプロパティにインデックス番号を指定するのですか？

あなたはありません。代わりに、テキストボックスとボタンが同じ行にあるという事実を使用します。私はおそらく、ボタンには全くonclickを使用しないでしょう。代わりに、私はtableに1つのクリックハンドラを持ち、ボタンのクリックを処理します（これはイベントデリゲーションと呼ばれます）。このような何か：

var table = document.getElementById("theTableID"); 
table.onclick = function(event) { 
    var elm, row, boxes, index, box; 

    // Handle IE difference 
    event = event || window.event; 

    // Get the element that was actually clicked (again handling 
    // IE difference) 
    elm = event.target || event.srcElement; 

    // Is it my button? 
    if (elm.name === "clear") { 
     // Yes, find the row 
     while (elm && elm !== table) { 
      if (elm.tagName.toUpperCase() === "TR") { 
       // Found it 
       row = elm; 
       break; 
      } 
      elm = elm.parentNode; 
     } 
     if (row) { 
      // Get all input boxes anywhere in the row 
      boxes = row.getElementsByTagName("input"); 
      for (index = 0; index < boxes.length; ++index) { 
       box = boxes[index]; 
       if (box.name === "whatever") { 
        box.value = ""; 
       } 
      } 
     } 
    } 
}; 

...しかし、あなたの代わりにボタンをonclick属性を使用し続けたい場合は、あなたがそれの真ん中をつかむことができます。

ボタン：

<input type="button" onclick="clearBoxes(this);" ...> 

機能：

function clearBoxes(elm) { 
    var row, boxes, index, box; 

    // Find the row 
    while (elm) { 
     if (elm.tagName.toUpperCase() === "TR") { 
      // Found it 
      row = elm; 
      break; 
     } 
     elm = elm.parentNode; 
    } 
    if (row) { 
     // Get all input boxes anywhere in the row 
     boxes = row.getElementsByTagName("input"); 
     for (index = 0; index < boxes.length; ++index) { 
      box = boxes[index]; 
      if (box.name === "whatever") { 
       box.value = ""; 
      } 
     } 
    } 
} 

参考文献：

• DOM2 Core仕様 - DOMとHTMLの間のバインディング
• DOM3 Core仕様 - - いくつかの更新、すべてはすべての主要なブラウザ
• HTML5 specificationでサポートされていない - 今すぐすべての主要なブラウザ
• DOM2 HTML仕様でもサポートHTMLInputElementのようにDOM/HTMLバインディングがありますので、valueとnameのプロパティについて知っています。オフトピック

---

：あなたが見ることができるように、私はいくつかのブラウザの違いを回避し、その中で明示的に（要素の最も近い親要素を見つけることのような）いくつかの簡単なユーティリティのことを行うために持っていましたコード。 jQuery、Prototype、YUI、Closure、またはany of several othersのような適切なJavaScriptライブラリを使用すると、実際の問題に集中できるようになります。

$("#theTableID").delegate("input:button[name='clear']", "click", function() { 
    $(this).closest("tr").find("input:text[name='whatever']").val(""); 
}); 

本当に、はい：あなたのアイデアを与えることを

は、ここではjQueryを使って書かれている最初の例は、（イベントの委任を経由してクリックを扱う）です。そして、他の図書館も同様に物事を簡単にします。