在複選框上添加動態行和數據單擊

我再一次遇到了一個jQuery問題，我希望得到一些幫助。在複選框上添加動態行和數據單擊

我有一系列的複選框，看起來像這兩個：

<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或類名稱（與上面的每個名稱都相同）添加爲該行中的文本框值。我也希望他們在未點擊時刪除它們，但它們並不總是最後一行，因此：上次對我來說並不適用。

這是上表：

<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>

我現在用的是jQuery Table AddRow plugin。我已經使用下面的代碼來添加行，這很好（雖然我沒有得到我漂亮的交替行），但它也添加行到底部，在我的「添加行」按鈕下面，所以我' 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插件代碼），並將不勝感激任何幫助，我可以得到這個工作。

謝謝。

來源

2011-12-28 Will Sam

我建議改用change。嘗試類似

$("#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(); 
    } 
});

小提琴：http://jsfiddle.net/dz2PR/1/

來源

2011-12-28 17:43:51

在複選框上添加動態行和數據單擊

回答

相關問題