Question

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

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

enter image description here

这里首先存在两行，当我点击新按钮时，第三行就出现了。我，非常肯定是因为附加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 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'
        });

从按钮点击功能我将获得如下图片 enter image description here 但是这里默认的空名称显示第三行，我不能通过单击令牌插件

来删除它

Answer 1

您的代码存在一些问题，但主要问题是前两个脚本 - $('.diag').each(function () {和$('.diag_desc').each(function () { - 正在将插件分配给所有元素和类名称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的变量。不完全确定你试图用这个做什么，但假设你想申请＆＃34;小学＆＃34;如果它是表中的第一行，则为新行，否则为＆＃34; Secondary＆＃34;，则最好将模板修改为

<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"的任何元素，所以不确定那是什么（也许你只是在问题中忽略了它），但如果它在每一行中都是一个元素，那就不要使用{ {1}}属性（重复id是无效的html），而是使用类名

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

1 个答案: