javascript - 如何复制整行？

Question

我需要创建一个可以包含“添加行”按钮的表单。单击此按钮应创建一个新行，该行应与我的最后一行相同。我的行也包含一些下拉值，因此我希望它们在下一行中显示相同。 (编辑:所以我能够克隆一行，但每行的 id 也被克隆，我希望它是唯一的)。

var regex = /^(.*)(\d)+$/i;
var cindex = 1;
$(document).on('click','.Buttons', function() {
    var $tr    = $('#dataTable tbody tr:first');
    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 || "";
            var match = id.match(regex) || [];
            if (match.length == 3) {
                this.id = match[1] + (cindex);
            }
    });
    $tr.after($clone);
});

<table border="0" cellspacing="1" cellpadding="1" id="dataTable" class="graphtable">
  <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>
  <tr id="row0" name="row">
    <td>
      <select title="" tabindex="1" id="fldtype" name="fldtype" class="objselect">
        <option value="SEL" selected='true'>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" class="objinputtext" size="85" value="{//RESPONSE}">
      <xsl:attribute name="value"></xsl:attribute>
      </input>
    </td>
    <td>
      <input id="fldimg" name="fldimg" maxlength="15" class="objinputtext" size="35" value="{//RESPONSE}">
      <xsl:attribute name="value"></xsl:attribute>
      </input>
    </td>
    <td>
      <input id="fldurl" name="fldurl" maxlength="15" class="objinputtext" size="35" value="{//RESPONSE}">
      <xsl:attribute name="value"></xsl:attribute>
      </input>
    </td>
  </tr>
</table>
</div>
<div class="bottompanel">
  <ul>
    <li></li>
  </ul>
</div>
</span>
<div class="buttonarea">
  <ul>
    <li><input tabindex="6" id="Button3" onClick="fnAddMore ();" value="Add More" class="Buttons" name="Button3" type="button" /></li>
  </ul>
</div>

Answer 1

您使用的代码存在多个问题，例如使用已弃用的 delegate()而不是on() ，并且还尝试将事件委托(delegate)给不是目标父级的元素。

要实现您的要求，您可以使用 clone()创建第一个 tr 的新实例在 table然后您可以 append() 。请注意，我用thead分隔了表格的标题和内容。和tbody使检索和插入更容易的元素。最后，请注意input元素没有结束标签，并且有几个不匹配的 </div>和</span>我从 HTML 中删除的标签。

$(document).on('click', '.Buttons', function() {
  var $clone = $('#dataTable tbody tr:first').clone().appendTo('#dataTable tbody');
  $clone.find(':input').val('');
});

<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="row0" name="row">
      <td>
        <select title="" tabindex="1" id="fldtype" name="fldtype" class="objselect">
          <option value="SEL" selected='true'>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" class="objinputtext" size="85" value="{//RESPONSE}" />
        <xsl:attribute name="value"></xsl:attribute>
      </td>
      <td>
        <input id="fldimg" name="fldimg" maxlength="15" class="objinputtext" size="35" value="{//RESPONSE}" />
        <xsl:attribute name="value"></xsl:attribute>
      </td>
      <td>
        <input id="fldurl" name="fldurl" maxlength="15" class="objinputtext" size="35" value="{//RESPONSE}" />
        <xsl:attribute name="value"></xsl:attribute>
      </td>
    </tr>
  </tbody>
</table>
<div class="bottompanel">
  <ul></ul>
</div>
<div class="buttonarea">
  <ul>
    <li><input tabindex="6" id="Button3" value="Add More" class="Buttons" name="Button3" type="button" /></li>
  </ul>
</div>