ボタンをクリックすると動的に行を追加する必要があるテーブルがあります。各行には3つのテキストボックスとクリアボタンがあります。クリアをクリックすると、テキストボックス内のデータをクリアする必要があります。つまり、ボタンのonclickは、そのインデックスのテキストボックスの内容を削除するメソッドに行のインデックスを送信します。JavaScriptの動的インデックス設定
問題 - 新しい行を追加する際に、行ボタンのonClickプロパティでインデックス番号を指定するにはどうすればよいですか?
ボタンをクリックすると動的に行を追加する必要があるテーブルがあります。各行には3つのテキストボックスとクリアボタンがあります。クリアをクリックすると、テキストボックス内のデータをクリアする必要があります。つまり、ボタンのonclickは、そのインデックスのテキストボックスの内容を削除するメソッドに行のインデックスを送信します。JavaScriptの動的インデックス設定
問題 - 新しい行を追加する際に、行ボタンのonClickプロパティでインデックス番号を指定するにはどうすればよいですか?
イベントデリゲートを使用することをお勧めします。また、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>
}
btnから親TRを取得するにはどうすればよいですか? –
は、どのように私は、行のボタンの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 = "";
}
}
}
}
参考文献:
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を使って書かれている最初の例は、(イベントの委任を経由してクリックを扱う)です。そして、他の図書館も同様に物事を簡単にします。
非常に良い答え! –
ありがとう..上記で提供されたclearBoxesメソッドは、私の仕事をしました。 –
@サンマン:うれしいこと、喜んで助けました。あなたの質問に「回答しました」と記されるように答えを受け入れることを忘れないでください。詳細:* [回答の受付はどのように受け付けますか?](http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work)* –
私たちはまた、Jqueryを使用する柔軟性も持っています。したがって、それを使用するいくつかの方法も役立ちます。 –
@サンマン:私は、私の答えにjQueryを使った例を追加しました。私はあなたのコメントを以前に見たことはありませんでしたが、私はどのくらいの図書館があなたを救うことができるかという私の例で使った図書館であった。 :-) –