表格行上的JQuery對話框

Question

我使用c＃和剃鬚刀來生成發票清單。每張發票都是一張表格行，並有一大堆針對它的筆記。爲了避免行之間存在大量空間，我想隱藏筆記並允許彈出窗口查看它。目前它是：

<td> 
@foreach (var invoiceLine in invoice.InvoiceLines) 
       { 
        <p> 
         <strong>@invoiceLine.Date.ToShortDateString() @invoiceLine.Username</strong> <br /> 
         @Html.Raw(invoiceLine.Notes.Replace(Environment.NewLine, "<br />")) 
         @Html.Raw((invoiceLine.DueDate.HasValue ? "<br /><strong>Follow up:</strong> " + invoiceLine.DueDate.Value.ToShortDateString() : "")) 
         @Html.Raw(invoiceLine.Completed ? "<br /><strong>Completed</strong>" : "") 
        </p> 
       } 

所以我想要做的就是使用jQuery彈出窗口添加到：

$(function() { 

$('#clickMe').click(function (event) { 
    var mytext = $('#myText').val(); 

    $('<div id="dialog">' + mytext + '</div>').appendTo('body'); 
    event.preventDefault(); 

    $("#dialog").dialog({ 
     width: 600, 
     modal: true, 
     close: function (event, ui) { 
      $("#dialog").hide(); 
     } 
    }); 
}); //close click 

}）;

然後修改我的代碼：

<td> 
      <h3 id="clickMe">Open Notes</h3> 
       <textarea cols="1" rows="75" id="myText" style="display:none"> 
       @foreach (var invoiceLine in invoice.InvoiceLines) 
       { 
        <p> 
         <strong>@invoiceLine.Date.ToShortDateString() @invoiceLine.Username</strong> <br /> 
         @Html.Raw(invoiceLine.Notes.Replace(Environment.NewLine, "<br />")) 
         @Html.Raw((invoiceLine.DueDate.HasValue ? "<br /><strong>Follow up:</strong> " + invoiceLine.DueDate.Value.ToShortDateString() : "")) 
         @Html.Raw(invoiceLine.Completed ? "<br /><strong>Completed</strong>" : "") 
        </p> 
       } 
       </textarea> 
      </td> 

第一個問題是，只出現在第一行。我認爲，因爲我的身份證一直都是一樣的？

如何讓對話框打開每一行？

我對於新手，在C＃和js BTW :)

Answer 1

第一：textarea的毫無意義可言。

然後改變這樣的零件。看到它在jsfiddle中工作。

HTML

<td> 
@foreach (var invoiceLine in invoice.InvoiceLines) 
{ 

    <p> 
     <strong>@invoiceLine.Date.ToShortDateString() @invoiceLine.Username</strong> <br /> 
     @Html.Raw((invoiceLine.DueDate.HasValue ? "<br /><strong>Follow up:</strong> " + invoiceLine.DueDate.Value.ToShortDateString() : "")) 
     @Html.Raw(invoiceLine.Completed ? "<br /><strong>Completed</strong>" : "") 

     <h3 class="notesClick">Open Notes</h3> 
     <div class="notesHtml" style="display:none"> 
      @Html.Raw(invoiceLine.Notes.Replace(Environment.NewLine, "<br />")) 
     </div> 

    </p> 
} 
</td> 

JS

$(function() { 

    $('.notesClick').click(function(event) { 
     var notes = $(event.currentTarget).next('.notesHtml'); 
     $("<div>").html(notes.html()).dialog(); 
    }); 

});​