チェックボックスの動的行とデータの追加をクリックします。

Question

もう一度jQueryの問題を抱えています。私はいくつかの助けが必要です。

が、私はこれらの2のように見えるのチェックボックスのシリーズを持っている：

私は（私はすでに別のボタンで行うことができます）前のテーブルに新しいダイナミックな行を追加されて何をしたいのか

<input type="checkbox" name="MultiPointInspection" id="MultiPointInspection" class="MultiPointInspection" value="<?php echo $MultiPointInspection; ?>" onKeyPress="return disableEnterKey(event)" rel="Multi Point Vehicle Inspection" />&nbsp;Multi Point Vehicle Inspection<br /> 
<input type="checkbox" name="TireRotationandBrake" id="TireRotationandBrake" class="TireRotationandBrake" value="<?php echo $TireRotationandBrake; ?>" onKeyPress="return disableEnterKey(event)" />&nbsp;Tire Rotation and Brake Inspection<br /> 

、この場合は、これらのいずれかがクリックされたときに、その行のテキストボックス値として名前、またはIDまたはクラス名（上記と同じです）を追加します。私はまた、彼らがクリックされていないときにそれらを削除したい、しかし、彼らはいつも最後の行ではないので、最後には本当に私のために動作しません。私はjQuery Table AddRow pluginを使用しています

<table id="atable" class="atable"> 
<tr> 
<td>Description</td><td>Stocked</td><td>Quantity</td><td>Part Price</td><td>Hours</td><td>Rate Class</td><td>Total</td><td>Approved</td><td>Remove Row</td></tr> 
<tr class="dynamic_row"> 
<td><input name="description[]" id="description" value="<?php echo $description; ?>" size="55" class="numeric add_to_total description" onKeyPress="return disableEnterKey(event)" /> 
</td><td align="center"><input type="checkbox" name="stocked[]" id="stocked" value="<?php echo $stocked; ?>" size="5" class="numeric add_to_total" onKeyPress="return disableEnterKey(event)" /> 
</td><td><input name="quantity[]" id="quantity" value="<?php echo $quantity; ?>" size="5" class="numeric add_to_total quantity" onKeyPress="return disableEnterKey(event)" /> 
</td><td><input name="partPrice[]" id="partPrice" value="<?php echo $partPrice; ?>" size="10" class="numeric add_to_total part" onKeyPress="return disableEnterKey(event)" /> 
</td><td><input name="hours[]" id="hours" value="<?php echo $hours; ?>" size="10" class="numeric add_to_total hours" onKeyPress="return disableEnterKey(event)" /> 
</td><td><select name="rate[]" id="rate" class="numeric add_to_total rate" onKeyPress="return disableEnterKey(event)"> 
<?php 
    //get rate options from database 
?> 
</select> 
</td><td><input name="total[]" id="total" size="10" class="numeric is_total" readonly="readonly" onKeyPress="return disableEnterKey(event)" /> 
</td><td align="center"><input type="checkbox" name="approved[]" id="approved" class="add_to_total approved" checked="checked" value="<?php echo $approved; ?>" size="10" onKeyPress="return disableEnterKey(event)" /> 
</td><td align="center"><img src="img/x.png" width="25" height="25" id="removeButton" title="Remove Row" class="delRow" /> 
</td></tr> 
<img src="img/plus.png" width="25" height="25" id="btnAddRow" title="Add New Row" class="alternativeRow" />  
</table> 

：

これは、前の表です。私は次のコードを使用して行を追加していますが、これは問題ありませんが、行を追加する行の下に行を追加するので、 mはまた、appendTo（）への解決策を探して、そしてだろうが、むしろそれはちょうど、最後の行の上に追加しました：

$("#MultiPointInspection,#TireRotationandBrake").on('click', function() { 
    if ($(this).prop("checked")) { 
     $('#atable .dynamic_row:first').clone().appendTo("#atable"); 
    } 
    else { 
     $('#atable .dynamic_row:last').remove(); 
    } 
}); 

、これは他のボタンのクリックで行を追加するための定期的なコードです：

$("document").ready(function(){ 
    $(".alternativeRow").btnAddRow({oddRowCSS:"oddRow",evenRowCSS:"evenRow"}); 
    $(".delRow").btnDelRow(); 
}); 

私が十分に質問していないかのように、私がやりたいことは、これらの行に最後の列が追加されていないということです。最後の列には行を削除するためのリンクが含まれていますが、チェックボックスを外すと削除される行のみが好きです。

問題の基本的な設定でfiddleを作成しました（javascriptには完全なjQuery Table AddRowプラグインコードが含まれています）、この作業を行う上で助けていただけると助かります。

ありがとうございます。

Answer 1

代わりにchangeを使用することをお勧めします。 http://jsfiddle.net/dz2PR/1/

：

$("#MultiPointInspection,#TireRotationandBrake").on('change', function() { 
    if ($(this).is(':checked')) { 
     $('<tr><td><input type="text" id="'+$(this).attr("id")+'" 
       class="'+$(this).attr("class")+'" name="'+$(this).attr("name")+'"/> 
        </td></tr>').appendTo("#atable"); 
    } 
    else { 
     $('input#'+$(this).attr("id")+'[type="text"]').remove(); 
    } 
}); 

バイオリンのようなものを試してみてください