时间戳

首页 > 解决方案 > 克隆表单字段并增加 id

javascript - 克隆表单字段并增加 id

问题描述

单击添加按钮时，我还需要添加行并增加 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>');
  
  
}

标签： javascriptjavajqueryspring-mvc

解决方案

这应该这样做：

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>

推荐阅读