动态添加新行时，两行被添加到 MVC 中的 table

Question

在我的 MVC 中有一个 table 两个，我们可以动态添加行。我有两种形式。第一种形式用于添加新请求，动态添加行没有任何问题并能够成功提交。

第二种形式正在打开一个退出请求和修改。我已将 jquery 输入标记附加到文本框。我能够在请求中显示现有值。但是当我点击按钮添加新行时，它添加了两行，如下图所示

此处前两行是现有的，当我单击“新建”按钮时，出现了第三行。我很确定这是因为附加 jquery 输入令牌时出现问题，因为在 诊断类型 中缺少附加行

请找到我用于实现这些场景的代码

动态模板

<table id="Newdiagnosis" style="display:none">
  <tr>
    <td><input id="diag-%" class="diag" style="width:200px" type="text" name="provider_diagnosis_dtls[#].diagnosis_code" value /></td>
    <td><input id="desc-%"  class="diag_desc" style="width:500px" type="text" name="provider_diagnosis_dtls[#].diagnosis_desc" value /></td>
    <td>
      <input id ="level-%" type="text"name="provider_diagnosis_dtls[#].diagnosis_level" readonly value />
      <input type="hidden" name="provider_diagnosis_dtls.Index" value="%" />
    </td>
  </tr>
</table>

实际Table

<table id="diagnosis" >
  <tr>
    <th style="width:200px">Diagnosis Code</th>
    <th style="width:500px">Diagnosis Description</th>
    <th>Diagnosis Type</th>
    <th style="width:6px"></th>
  </tr>
  @if (Model != null)
  {
   for (int i = 0; i < Model.provider_diagnosis_dtls.Count; i++)
   {
     <tr>
       <td>@Html.TextBoxFor(m => m.provider_diagnosis_dtls[i].diagnosis_code, new { @class "diag")</td>
       <td>@Html.TextBoxFor(m => m.provider_diagnosis_dtls[i].diagnosis_desc, new { @class "diag_desc")</td>
       <td>
         @Html.TextBoxFor(m => m.provider_diagnosis_dtls[i].diagnosis_level,new { @readonly = "readonly" })
         <input type="hidden" name="provider_diagnosis_dtls.Index" value="@i" />
       </td>
     </tr>
   }
 }

Jquery

$(document).ready(function () {
  //to assign and attach jquery token input to existing rows class diag
  $('.diag').each(function () {
    $(this).tokenInput("@Url.Action("SearchDiagnosis","Preapproval")",
    {
      prePopulate: [{ id: $(this).val(), name: $(this).val() }],
      theme: 'facebook',
      preventDuplicates: true,
      searchingText: 'Searching diagnosis code...',
      tokenLimit: 1,
      hintText: 'Diagnosis Code'
    });
  });
  //to assign and attach jquery token input to existing rows class diag_desc
  $('.diag_desc').each(function () {
    $(this).tokenInput("@Url.Action("SearchDiagnosis_desc", "Preapproval")",
    {
      prePopulate: [{ id: $(this).val(), name: $(this).val() }],
      theme: 'facebook',
      preventDuplicates: true,
      searchingText: 'Searching diagnosis desc...',
      tokenLimit: 1,
      hintText: 'Diagnosis desc'
    });
  });

  // Button click for adding new rows          
  $("#N").click(function () {
    var index = (new Date()).getTime();
    var clone = $('#Newdiagnosis').clone();
    clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
    clone.html($(clone).html().replace(/"%"/g, '"' + index + '"'));
    clone.html($(clone).html().replace(/"token-input-diag-%"/g, 'token-input-diag-' + index));
    clone.html($(clone).html().replace(/"token-input-desc-%"/g, 'token-input-desc-' + index));
    clone.html($(clone).html().replace(/"diag-%"/g, 'diag-' + index));
    clone.html($(clone).html().replace(/"desc-%"/g, 'desc-' + index));
    clone.html($(clone).html().replace(/"level-%"/g, 'level-' + index));
    var html = clone.html();
    $("#diagnosis").append(clone.html()); 
    $("#diagnosis").find(".diag").last().tokenInput("@Url.Action("SearchDiagnosis","Preapproval")",
    {
      theme: 'facebook',
      preventDuplicates: true,
      searchingText: 'Searching diagnosis code...',
      tokenLimit: 1,
      hintText: 'Diagnosis Code'
    });
    $("#diagnosis").find(".diag_desc").last().tokenInput("@Url.Action("SearchDiagnosis_desc","Preapproval")",
    {
      theme: 'facebook',
      preventDuplicates: true,
      searchingText: 'Searching diagnosis desc...',
      tokenLimit: 1,
      hintText: 'Diagnosis Description'
    });
    if (index1 == 1) {
      $("#diagnosis").find("#level-" + index).val("Primary");
      $("#diagnosis").find("#diag_delete").attr("disabled", true)
    } else
      $("#diagnosis").find("#level-" + index).val("Secondary");
  });
});

已编辑

如果我删除

$("#diagnosis").find(".diag").last().tokenInput("@Url.Action("SearchDiagnosis","Preapproval")",
        {
        theme: 'facebook',
        preventDuplicates: true,
        searchingText: 'Searching diagnosis code...',
        tokenLimit: 1,
        hintText: 'Diagnosis Code'
        });
      $("#diagnosis").find(".diag_desc").last().tokenInput("@Url.Action("SearchDiagnosis_desc","Preapproval")",
        {
        theme: 'facebook',
        preventDuplicates: true,
        searchingText: 'Searching diagnosis desc...',
        tokenLimit: 1,
        hintText: 'Diagnosis Description'
        });

从按钮点击功能我会得到如下图但这里默认的空名称显示第三行，我无法通过单击令牌插件删除它

Answer 1

您的代码存在一些问题，但主要问题是前 2 个脚本 - $('.diag').each(function () { 和 $('.diag_desc').each(function () { - 将插件分配给 all 具有 class 名称 diag 和 diag_desc 的元素，包括用于生成新行的隐藏模板中的元素。最初将插件附加到文本框时需要排除模板。

还有一些其他小问题，您添加新行的脚本应该是

var table = $("#diagnosis"); // cache it
var newTable = $('#Newdiagnosis'); // cache it
$("#N").click(function () {
  var index = (new Date()).getTime();
  var clone = $('#Newdiagnosis').clone();
  clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
  clone.html($(clone).html().replace(/"%"/g, '"' + index + '"'));
  var newrow = clone.find('tr');
  table.append(newrow);
  newrow.find('.diag').first().tokenInput('@Url.Action("SearchDiagnosis","Preapproval")', {
    prePopulate: [{id:$(this).val(), name: $(this).val()}],
    theme: 'facebook',
    searchingText: 'Searching diagnosis code...',
    tokenLimit: 1,
    hintText: 'Diagnosis Code'
  });
  // repeat for newrow.find('.diag_desc').....
});

并从模板中删除 id 属性。注意最后一个脚本

if (index1 == 1) {
  $("#diagnosis").find("#level-" + index).val("Primary");
  $("#diagnosis").find("#diag_delete").attr("disabled", true)
} else {
  $("#diagnosis").find("#level-" + index).val("Secondary");
}

当前无法工作 - 没有名为 index1 的变量。不完全确定你想用这个做什么，但假设你想将 "Primary" 应用到新行，如果它是 table 中的第一行，否则 "Secondary"，那么它将是最好将模板修改为

<input type="text"name="provider_diagnosis_dtls[#].diagnosis_level" class="level" readonly value="Secondary" />

那么脚本就是

var rowCount = table.find('tr').length;
if(rowCount == 1) {
  table.find('.level').first().val("Primary");
}

注意：无法找到带有 id="diag_delete" 的任何元素，因此不确定那是什么（也许您只是在问题中忽略了它），但如果它在每一行中都有一个元素，则不要使用 id 属性（重复的 id 无效 html），请改用 class 名称

动态添加新行时，两行被添加到 MVC 中的 table

when adding new rows dynamically two rows getting added to the table in MVC

asp.net-mvc

jquery

jquery-tokeninput