如何操作 jQuery 克隆以刪除屬性

Question

我有一個表，其中包含通過 foreach 填充數據的行。

我正在使用:last selector到 select 元素並clone以添加新行。 而使用remove刪除行。

在使用 foreach 填充結果時，我禁用了幾個字段，我正在尋找一種解決方法來刪除特定元素的禁用屬性。

預填充數據以方便使用

 $("#add_row").on("click", function (e) { var $tableBody = $('#tab_logic').find("tbody"), $trLast = $tableBody.find("tr:last"), $trNew = $trLast.clone(); $trLast.after($trNew); }); $("#delete_row").click(function () { $('#tab_logic #tab_logic_body tr:last').remove(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="tab_logic" id="tab_logic"> <thead class="orange "> <tr> <th> Product Name </th> <th> HSN Code </th> <th class="center"> GST </th> <th> Quantity </th> <th> Rate(per Nos) </th> <th> Amount </th> </tr> </thead> <tbody id="tab_logic_body"> @foreach ($invoice_details as $items) // Can be ignored <tr> <td> <input type="text" class="product_name autocomplete" placeholder="" value="Product Name" disabled> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="text" class="hsn_code autocomplete" placeholder="" value="HSNCODE"> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="text" class="gst autocomplete" placeholder="GST" name="gst[]" readonly="readonly" value="18"> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="number" name='quantity[]' placeholder='Enter Qty' class="form-control qty" step="0" min="0" value="1" /> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="number" name='product_price[]' placeholder='Enter Price' class="form-control product_price" step="0" min="0" value="100" /> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="number" name='row_total_amount[]' placeholder='Total Amount' class="form-control row_total_amount" step="0" min="0" value="118" /> </div> </div> </div> </td> </tr> @endforeach </tbody> </table> <table> <thead> <tr> <th> <th class="right"> <button type="button" class="btn z-depth-1" id="add_row"><i class="material-icons">add_box</i> </button> <button type="button" class="btn z-depth-1 red" id="delete_row"><i class="material-icons">remove</i> </button> </th> </th> </tr> </thead> </table>

Answer 1

為此，您可以使用$trNew中的find()來檢索所有禁用的表單控件。 然后您可以使用prop('disabled', false)再次啟用它們：

$trNew.find(':input[disabled]').prop('disabled', false);

 $("#add_row").on("click", function(e) { var $tableBody = $('#tab_logic').find("tbody"), $trLast = $tableBody.find("tr:last"), $trNew = $trLast.clone(); $trLast.after($trNew); $trNew.find(':input[disabled]').prop('disabled', false); }); $("#delete_row").click(function() { $('#tab_logic #tab_logic_body tr:last').remove(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="tab_logic" id="tab_logic"> <thead class="orange "> <tr> <th>Product Name</th> <th>HSN Code</th> <th class="center">GST</th> <th>Quantity</th> <th>Rate(per Nos)</th> <th>Amount</th> </tr> </thead> <tbody id="tab_logic_body"> <tr> <td> <input type="text" class="product_name autocomplete" placeholder="" value="Product Name" disabled> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="text" class="hsn_code autocomplete" placeholder="" value="HSNCODE"> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="text" class="gst autocomplete" placeholder="GST" name="gst[]" readonly="readonly" value="18"> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="number" name='quantity[]' placeholder='Enter Qty' class="form-control qty" step="0" min="0" value="1" /> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="number" name='product_price[]' placeholder='Enter Price' class="form-control product_price" step="0" min="0" value="100" /> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="number" name='row_total_amount[]' placeholder='Total Amount' class="form-control row_total_amount" step="0" min="0" value="118" /> </div> </div> </div> </td> </tr> </tbody> </table> <table> <thead> <tr> <th> <th class="right"> <button type="button" class="btn z-depth-1" id="add_row"><i class="material-icons">add_box</i></button> <button type="button" class="btn z-depth-1 red" id="delete_row"><i class="material-icons">remove</i></button> </th> </th> </tr> </thead> </table>