Jqueryとテーブルの操作

Question

私はPHPでループしてテーブルを作成しました。つまり、テーブルの行数は動的になります（1,2,3,4,5など）。 私は最後にそれを各行に入れておきます。フォーカスすると、以前のtdの値がすべて計算され、最後に表示されます。

<select name="number" id="number" onchange="document.form2.submit()"> 
<? for($j=1;$j<=5;$j++) {?> 
    <option value="<?=$j ?>" <?=($j==$_REQUEST['number'])?'selected':'' ?>><?=$j ?></option> 
<? } $num=$_REQUEST['number']; ?> 
</select> 
<table width="100%" border="0" cellpadding="4" cellspacing="5" id="mytable"> 
    <thead> 
     <tr> 
      <th width="35%">Length</th> 
      <th width="36%">Width</th> 
      <th width="29%">Area</th> 
     </tr> 
    </thead> 
    <tbody> 
    <? for($i=0;$i<$num;$i++) {?> 
     <tr class="row"> 
      <td><input type="text" name="length" class="textbox" id="length"/></td> 
      <td><input type="text" name="width" class="textbox" id="width" /></td> 
      <td><input type="text" name="area" class="textbox" id="area" onfocus="" /></td> 
     </tr> 
    <? } ?> 
    </tbody> 
</table> 

各行の最後のtdを選択するコードを入力してください。 私は多くを試みたが成功しなかっyet.Allヘルプが途中で...

Answer 1

Demo here

$(function() { 

    $('input[name="area"]').on('focus', function() { 
     var $tr = $(this).closest('tr'); 
     var $length = $tr.find('input[name="length"]').val(); 
     var $width = $tr.find('input[name="width"]').val(); 
     this.value = $length * $width 
    }); 

});​ 

を理解されるであろう、IDは一度だけ使用することができます。それを複数回使用することはできません。行の最後のtdにtextboxを選択するには、行

$('tr.row td:last-child'); 

の最後tdを選択するには

Answer 2

：

$('tr.row td:last-child').children('input.textbox')​ 

これは非常に簡単にするためには、IDを繰り返しませんあなたのテキストボックスに追加のクラスを追加してください：

<? for($i=0; $i<$num; $i++) {?> 
<tr class="row"> 
    <td><input type="text" name="length" class="textbox length" /></td> 
    <td><input type="text" name="width" class="textbox width" /></td> 
    <td><input type="text" name="area" class="textbox area" onfocus="" /></td> 
</tr> 
<? } ?> 

行の最後の tdに textboxを選択するために、上記のようにマークアップして

は、次のようになります。

$('input.area')​