Question

在示例中，我希望每次单击“添加”按钮以将元素置于模板div 中并将其附加到 landingzone类元素时。但与此同时，我需要 NEWID 来更改新元素。当然这仅仅是一个例子，表格的东西可以是div或其他任何东西。

形式：

<form method="post">
   <input type="text" name="title">
   <input type="text" name="number">
   <table>
      <thead>
         <tr> <th>Parts</th> </tr>
      </thead>
      <tbody class="landingzone">
      </tbody>
   </table>
   <input type="submit" value="Save">
   <input type="button" name"add" class="add" value="Save">
</form>

模板：

<div class="template" style="display: hidden">
   <tr id="NEWID">
      <td>
         <input type="text" name="part_NEWID">
      </td>
   </tr>       
</div>

实现这一目标的最佳方法是什么？

Answer 1

就像@Andrea在她的评论中所说，更多的细节将不胜感激......

我认为你所追求的是：

const $template = $('.template').clone()
$template.attr('id', 'someId')
$template.find('input[name="part_NEWID"]').attr('name', 'part_someId')
$('.landingzone').append($template)

如果你需要一个函数：

function appendTemplateToLandingZone (newId) {
  const $template = $('.template').clone()
  $template.attr('id', newId)
  $template.find('input[name="part_NEWID"]').attr('name', 'part_' + newId)
  $('.landingzone').append($template)
}

我没有测试过这个，所以可能需要稍微调整一下。如果您提供基本的jsbin，我会让它在那里工作。

Answer 2

以下是您需要的示例。 javascript可以在不更改任何html的情况下工作，但代替name"add"应该是name="add"

我在这里所做的是获取template tr的ID并使用增量和input字段名称进行设置。

＆＃13;

var $landingzone = $('.landingzone');
var $add = $('.add');
var desiredId = 'id';
$add.on('click', function() {
  var $template = $('.template').find('tr');
  var id = $template.attr('id');
  var idArr = id.split('-');
  if (!idArr[1]) {
    id = desiredId + '-1';
  } else {
    id = desiredId + '-' + (parseInt(idArr[1]) + 1);
  }
  $template.attr('id', id);
  $template.find('input').attr('name', 'part_'+id);
  console.log('input id--->'+id, 'input name--->'+'part_'+id);
  $landingzone.append($template.clone());
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
  <input type="text" name="title">
  <input type="text" name="number">
  <table>
    <thead>
      <tr>
        <th>Parts</th>
      </tr>
    </thead>
    <tbody class="landingzone">
    </tbody>
  </table>
  <input type="submit" value="Save">
  <input type="button" name="add" class="add" value="Add">
</form>

<table class="template" style="display: none">
  <tr id="NEWID">
    <td>
      <input type="text" name="part_NEWID">
    </td>
  </tr>
</table>

＆＃13;

如何将带有修改（id）内容的内联模板元素附加到另一个元素？

2 个答案: