テーブル内の行をトラバースする

Question

テーブル内に複数のテーブル行があり、それぞれの内部に入力があります。テーブル行をトラバースしようとしていますので、別の入力を使って入力の値を設定できます。最初のテーブル行でのみ動作しますが、テーブル内のすべての行をどのように作成できますか？

$('.myFirstInput').closest('tr').find('.mySecondInput').val('1000'); 
 

 
$('button').click(function() { 
 
    var tr = '<tr><td><input type="text" class="myFirstInput"</td>'+ 
 
      '<td><input type="text"></td>' + 
 
      '<td><input type="text" class="mySecondInput"></td></tr>'; 
 
    $('tbody').append(tr); \t 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <th>1</th> 
 
    <th>2</th> 
 
    <th>3</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td><input type="text" class="myFirstInput"></td> 
 
     <td><input type="text"></td> 
 
     <td><input type="text" class="mySecondInput"></td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="text" class="myFirstInput"></td> 
 
    <td><input type="text"></td> 
 
    <td><input type="text" class="mySecondInput"></td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="text" class="myFirstInput"></td> 
 
    <td><input type="text"></td> 
 
    <td><input type="text" class="mySecondInput"></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<button>Append row</button>

Answer 1

あなたの問題は、あなたがしているということです。そして私は、それはそれ内の値を設定していない新しいTRをappedとき、TRを追加するボタンがあり、ここに私のコードですHTMLで一意でなければならないIDを使用します。代わりにそれらをクラスに変更すると、これは期待どおりに動作するはずです。

function addVal() { 
 
    var elems = $('.myFirstInput').closest('tr').find('.mySecondInput'); 
 
    $.each(elems, function(s, e) { 
 
    if($(e).val() === '') { 
 
     $(e).val('1000'); 
 
    } 
 
    }); 
 
} 
 

 
$(document).ready(function() { 
 
$('button').click(function() { 
 
\t \t \t var tr = '<tr><td><input type="text" class="myFirstInput"</td>'+ 
 
'<td><input type="text"></td>' + 
 
'<td><input type="text" class="mySecondInput"></td></tr>'; 
 
\t \t \t $('tbody').append(tr); 
 
     addVal(); 
 
\t \t }); 
 
    
 
    addVal(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <th>1</th> 
 
    <th>2</th> 
 
    <th>3</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td><input type="text" class="myFirstInput"></td> 
 
     <td><input type="text"></td> 
 
     <td><input type="text" class="mySecondInput"></td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="text" class="myFirstInput"></td> 
 
     <td><input type="text"></td> 
 
     <td><input type="text" class="mySecondInput"></td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="text" class="myFirstInput"></td> 
 
     <td><input type="text"></td> 
 
     <td><input type="text" class="mySecondInput"></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<button>Append row</button>

Answer 2

同じdocumentに同じ名前を持つ複数のidを使用する権利はありません。代わりに、次の方法のようにclassを使用します。

$('input.mySecondInput').each(function(i, el){ 
 
    $(el).val('1000'); 
 
}); 
 

 
$('button#btnAppendRow').click(function() { 
 
    var tr = '<tr><td><input type="text" class="myFirstInput"</td>'+ 
 
    '<td><input type="text"></td>' + 
 
    '<td><input type="text" class="mySecondInput"></td></tr>'; 
 
    $('tbody').append(tr); 
 

 
    $('input.mySecondInput:last-child').val('1000'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table> 
 
    <thead> 
 
    <th>1</th> 
 
    <th>2</th> 
 
    <th>3</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td><input type="text" class="myFirstInput"></td> 
 
     <td><input type="text"></td> 
 
     <td><input type="text" class="mySecondInput"></td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="text" class="myFirstInput"></td> 
 
     <td><input type="text"></td> 
 
     <td><input type="text" class="mySecondInput"></td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="text" class="myFirstInput"></td> 
 
     <td><input type="text"></td> 
 
     <td><input type="text" class="mySecondInput"></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<button id="btnAppendRow">Append row</button>

Answer 3

問題は、あなたがid年代を使用していることです。定義上、idは一意でなければなりません。あなたのコードが実行されるとき、それはそれが見つけたidで最初の項目にのみ適用されます。 idをclassに変更するだけで、（その部分の）トリックを行う必要があります。

第2に、動的に行を作成しているようです（trを追加しています）。

$('.myFirstInput').closest('tr').find('.mySecondInput').val('1000'); 
 

 
$('button').click(function() { 
 
    var tr = '<tr><td><input type="text" class="myFirstInput"</td>'+ 
 
'<td><input type="text"></td>' + 
 
'<td><input type="text" class="mySecondInput"></td></tr>'; 
 
    $('tbody').append(tr); 
 
    $('.myFirstInput').closest('tr').find('.mySecondInput').val('1000'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<thead> 
 
<th>1</th> 
 
<th>2</th> 
 
<th>3</th> 
 
</thead> 
 
<tbody> 
 
<tr> 
 
<td><input type="text" class="myFirstInput"></td> 
 
<td><input type="text"></td> 
 
<td><input type="text" class="mySecondInput"></td> 
 
</tr> 
 
<tr> 
 
<td><input type="text" class="myFirstInput"></td> 
 
<td><input type="text"></td> 
 
<td><input type="text" class="mySecondInput"></td> 
 
</tr> 
 
<tr> 
 
<td><input type="text" class="myFirstInput"></td> 
 
<td><input type="text"></td> 
 
<td><input type="text" class="mySecondInput"></td> 
 
</tr> 
 
</tbody> 
 
</table> 
 

 
<button>Append row</button>

Answer 4

あなたは、各入力要素の一意の識別子を与える必要があります：あなたは、新しい行を挿入するたびに、同じ機能を実行します。最初の行にはmyFirstInput1とmySecondInput1が必要です。 2行目myFirstInput2およびmySecondInput2などです。そうすれば、各入力を正確に参照できるようになります。