javascript - 将属性添加到javascript中最近添加的输入字段

Question

我有以下隐藏的代码。

<div id="orderFields" style="display: none;">
  <table class="table">
    <tbody id="more-tr">
      <tr>
        <th style="font-weight: bold">Offer</th>
        <td class="col-lg-6 col-md-6 col-sm-12">
          <input type="text" class="form-control price" id="offer" placeholder="Offer title" value="" novalidate>
        </td>
        <th style="font-weight: bold">Image</th>
        <td class="col-lg-4 col-md-4 col-sm-12">
          <img src="" style="max-width:40%;max-height:20%" />
          <input type="file" name="image[]" style="background: transparent;border: transparent">
        </td>
        <td class="col-lg-2 col-md-2 col-sm-12">
          <a href="javascript:void(1);" style="width: 10%;">
            <span class="voyager-trash remove-this btn-danger" style="padding: 10px; border-radius: 5px;"></span>
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

我有一个按钮代码，在单击时从隐藏字段添加 tr 字段。

<div class="col-md-12">
  <a href="javascript:void(0)" class="btn btn-success btn-xs" id="addMore" style="float: right;">
    <i class="fa fa-plus"></i> <span>Add offer(s)</span>
  </a>
</div>

JavaScript 如下:

$("#addMore").on("click", function() {
  $(".multipleDiv").after($('#orderFields #more-tr').html());
});

按钮和 tr 工作正常，但在提交表单时我从隐藏的 div 获取数据。所以，我从隐藏的 div 中删除了属性。现在，我想在单击按钮后刚刚添加的输入字段中添加一个名称属性。但是，我不想将属性添加到隐藏的输入标签的输入字段。

我怎样才能做到这一点？ 另外，为什么我得不到来自 <input type="file" name="image"> 的数据？在表单标签内

Answer 1

您可以使用 clone()，然后使用 find() 获取 ID 为 offer 的输入。然后使用 attr() 设置属性。

$("#addMore").on("click", function() {
  let clone = $('#orderFields #more-tr').clone();
  let offer = clone.find('input[type="text"]');
  offer.attr('name', 'newOffer'); // replace with your value
  offer.attr('id', new Date().getTime()); // ID needs to be unique
  $(".multipleDiv").append(clone);
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div id="orderFields" style="display: none;">
  <table class="table">
    <tbody id="more-tr">
      <tr>
        <th style="font-weight: bold">Offer</th>
        <td class="col-lg-6 col-md-6 col-sm-12">
          <input type="text" class="form-control price" id="offer" placeholder="Offer title" value="" novalidate>
        </td>
        <th style="font-weight: bold">Image</th>
        <td class="col-lg-4 col-md-4 col-sm-12">
          <img src="" style="max-width:40%;max-height:20%" />
          <input type="file" name="image[]" style="background: transparent;border: transparent">
        </td>
        <td class="col-lg-2 col-md-2 col-sm-12">
          <a href="javascript:void(1);" style="width: 10%;">
            <span class="voyager-trash remove-this btn-danger" style="padding: 10px; border-radius: 5px;"></span>
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<table class="multipleDiv"></table>

<div class="col-md-12">
  <a href="javascript:void(0)" class="btn btn-success btn-xs" id="addMore" style="float: right;">
    <i class="fa fa-plus"></i> <span>Add offer(s)</span>
  </a>
</div>