时间戳

首页 > 解决方案 > 如何操作 jQuery 克隆来删除属性

javascript - 如何操作 jQuery 克隆来删除属性

问题描述

我有一个表，其中包含通过 foreach 填充数据的行。

我:last selector用来选择元素并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>

标签： javascripthtmljquery

解决方案

要实现这一点，您可以find()在 中使用$trNew来检索所有禁用的表单控件。然后您可以使用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>

推荐阅读