動態添加新行時添加到MVC表中的兩行

Question

在我的MVC中，我們可以動態添加行。我有兩種形式。第一種形式是添加新的請求，動態添加行可以解決任何問題並能夠成功提交。

第二種形式是打開退出請求並修改。我已經將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 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' 
     }); 

我會得到圖片如下圖所示 但這裏默認的空名稱顯示第三行，而im不是ab樂通過點擊該標記插件刪除

Answer 1

有你的代碼的幾個問題，但主要的一個是前2個腳本 - $('.diag').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的變量。不完全確定你想要做什麼，但假設你想要將「Primary」應用到新行，如果它是表中的第一行，否則「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），請使用類名稱代替