jQuery克隆表行

时间:2019-12-13 06:13:33

标签: javascript jquery html

我有一个表,最后有一个添加按钮。当您单击此按钮时,将克隆新行。我能够克隆行,但是由于我具有最初被禁用并从下拉列启用的列。我遇到的问题是,如果最初禁用了列,那么将添加一个新行,其中包含一个已禁用的行,但是当我通过从下拉列表中选择值来启用该行时,新行的列已经启用了,我想被禁用。

var regex = /^([a-zA-Z0-9 _-]+)$/;
var cindex = 0;
$(document).on('click', '.Buttons', function() {
  var $tr = $('#dataTable tbody tr:last');
  var $clone = $tr.clone(true);
  cindex++;
  $clone.find(':input').val('');
  $clone.attr('id', 'id' + (cindex)); //update row id if required
  //update ids of elements in row
  $clone.find("*").each(function() {
    var id = this.id || "";
    if (id != "") {

      var match = id.match(regex) || [];
      if (match.length == 2) {
        this.id = match[1] + (cindex);
      }
    }
  });
  $tr.after($clone);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0" cellspacing="1" cellpadding="1" id="dataTable" class="graphtable">
  <thead>
    <tr>
      <td class="headingalign" width="16%">Links</td>
      <td class="headingalign" width="32%">Desciption</td>
      <td class="headingalign" width="16%">Image</td>
      <td class="headingalign" width="16%">URL</td>
    </tr>
  </thead>
  <tbody>
    <tr id="id01" name="row">
      <td>


        <select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField()">
          <option value="">Select</option>
          <option value="GDS">Guides</option>
          <option value="LOF">Latest Offers</option>
          <option value="TEM">Templates</option>
          <option value="VID">Videos</option>
        </select>
      </td>
      <td>
        <input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext" size="85" value="{//RESPONSE}" />

      </td>
      <td>
        <input id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}" />

      </td>
      <td>
        <input id="fldurl" name="fldurl" maxlength="15" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}" />

      </td>
    </tr>
  </tbody>
</table>
<div class="buttonarea">
  <ul>
    <li><input tabindex="6" id="Button3" value="Add New Row" class="Buttons" name="Button3" type="button" /></li>
  </ul>
</div>

任何帮助将不胜感激。 Code

1 个答案:

答案 0 :(得分:1)

克隆后,将输入值设置为空字符串

$clone.find(':input').val('');

您需要将属性设置为已禁用

$clone.find(':input').not('select').val('').attr('disabled', true);

注意:我添加了.not('select'),因此选择框不会被禁用