克隆表单字段并增加 id

Posted 2023-02-26

【中文标题】克隆表单字段并增加 id

【英文标题】：Clone form fields and increment id as well

【发布时间】：2021-10-19 04:40:09

【问题描述】：

单击添加按钮时，我还需要添加行并增加 id。我的代码相应地添加了行，但 id 没有增加。

当我在第二行中插入数据时，它与第一个 id 一起保存。我还需要增加 id 以及添加行

html:

   <table id="mytable" class="noborder">
   <tbody>


   <tr>
    
   <td class="labelTextDetails">Dailyrep Id</td>
   <td class="labelTextDetails">Date</td>
   <td class="labelTextDetails">Task Type</td>
   <td class="labelTextDetails">Description</td>

    <td><input  type="text" /></td>
    <td><label onclick="add()">Add</label></td>

     </tr>

    <tr>
    <td class="fieldText"><s:input path="id" /> 
    </td>
   <td class="fieldText"><s:input path="date" placeholder="DD-MM-YYYY" 
    /> 
   </td>
  <td class="fieldText"> <s:select  path="task_type" 
  class="dropdown_Free">
 <s:option value="" label="Select"/>
 <s:option value="Technical" label="Technical"/>
 <s:option value="Non-Technical" label="Non-Technical"/>
 </s:select></td>
 <td class="fieldText"><s:input path="description" /></td>
 </tbody></table>

javascript：

      function add()
var row = $("#mytable > tbody > tr:last").html();
  $('#mytable > tbody').append('<tr>' + row + '</tr>');
  
  

【问题讨论】：

你在说什么id？只有mytable 而你对那个 o.O 无能为力

首先，哪个id？表本身的行上只有一个id。其次，使用不显眼的 JS 事件处理程序，而不是内联的 onclick 属性。第三，不要使用增量 id，在运行时设置。它使代码变得不必要的复杂而没有任何有用的好处。改为使用通用类、数据属性和/或 DOM 遍历来关联元素。

我需要增加 id - 不，不，你不需要。您可能认为确实如此，但实际上并非如此——当您意识到您会发现问题已解决时。 XY 问题 - 你认为你需要增加 id，但实际上你根本不需要 id。

有专门的克隆节点工具-> .clone()

@Rory McCrossan：我已经编辑了我的问题。当我在第二行插入数据时，我必须增加 Dailyrep Id

【参考方案1】：

应该这样做：

function add() 
  var row = $("#mytable > tbody > tr:nth-child(2)").html();
  $('#mytable > tbody').append('<tr>' + row + '</tr>');
  $.each($('.textbox'), function(index) 
    $(this).attr('value', index + 1);
  );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable" class="noborder">
  <tbody>
    <tr>
      <td class="labelTextDetails">Dailyrep Id</td>
      <td class="labelTextDetails">Date</td>
      <td class="labelTextDetails">Task Type</td>
      <td class="labelTextDetails">Description</td>
    </tr>
    <tr>
      <td class="fieldText">
        <input class="textbox" path="id" value="1" />
      </td>
      <td class="fieldText">
        <input path="date" placeholder="DD-MM-YYYY" />
      </td>
      <td class="fieldText">
        <select path="task_type" class="dropdown_Free">
          <option value="" label="Select" />
          <option value="Technical" label="Technical" />
          <option value="Non-Technical" label="Non-Technical" />
        </select>
      </td>
      <td class="fieldText">
        <input path="description" />
      </td>
      <td>
        <input type="text" />
      </td>
      <td>
        <label onclick="add()">Add</label>
      </td>
    </tr>
  </tbody>
</table>

【讨论】：

在线你想增加id吗？贴出代码行。

我已经编辑了我的代码...我必须增加 Dailyrep Id

我已经更新了我的代码示例。检查它，如果它符合您的需求，请投票或检查已回答的帖子。 THX

但在 sql 中，数据仅使用第一个 id 更新....当我插入第二行时，数据也仅在 sql 中使用第一个 id 进行更新

实际上在数据库中第二行应该用 id=2 更新；但是当我插入第二行时，数据会在数据库中更新为 id=1