在动态表中添加/编辑评论字段值

Question

我从 SQL 表中获取数据并通过下面的 HTML 表在部分视图中显示它：

<div class="panel panel-primary">
<h3>Disclosure of Incentives Form</h3>
<br />
<table class="table table-condensed table-striped table-bordered" style="width:100%" id="DIFQuestions">
    <thead>
        <tr>
            <th> Question</th>
            <th> Outcome</th>
            <th> Comments</th>
        </tr>
    </thead>
    <tbody>
        @For Each d In Model.DIFQuestions
            @<tr>
               <td hidden>@d.ID</td>
               <td width="40%" >@d.Description</td>
               <td width="10%">
                <form id="outcomeRadios">
                    <input type="radio" name="DIFPassFail" id="outcomePass" value="True" /> Pass &nbsp;
                    <input type="radio" name="DIFPassFail" id="outcomeFail" value="Fail" /> Fail
                </form>
              </td>
               <td>
                   <a href="#" class="difcomment" title="Add DIF Information">
                       <span class="fa fa-pencil"></span>
                   </a> &nbsp; Some text here
               </td>
               <td hidden>@d.Order</td>
             </tr>
        Next
    </tbody>
</table>
<br />
<div class="col-md-12">
    <button class="btn btn-success submitDIFAnswers">Submit</button>
</div>
<br>

可以看出，我显示了 3 个字段：“问题”、“结果”和“评论”。 “问题”来自 SQL 表，而“结果”和“评论”是通过 for 循环动态创建的。

“评论”字段上的字体真棒铅笔按钮调用以下模式：

<div class="modal fade" id="addeditdifcomments" role="dialog">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h3 class="modal-title">Add Comments</h3>
        </div>
        <div class="modal-body">
            <div class="row alert">
                <div class="col-md-6">
                    <textarea class="difinfo form-control" rows="3" id="difinfo" placeholder="Add DIF information" style="min-width: 200%;"></textarea>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <Button type="button" Class="btn btn-success submitdifcomment">Submit</Button>
        </div>
    </div>
</div>

我无法通过模式为每个问题提交单独的注释。下面是显示模式的 JQuery，以及用于保存每一行的注释文本的 JQuery：

$(document).ready(function () {

    $(".difcomment").click(function () {
        $("#addeditdifcomments").modal('show');
    });


    $(".submitdifcomment").click(function () {

        var difInfo = $(".difinfo").val();

        $(".difcomment").val(difInfo);

        $("#addeditdifcomments").modal('hide');
    });    

});

我希望所有这些都有意义。如果我需要提供更多信息，请告诉我。

任何形式的输入将不胜感激。谢谢你。

Answer 1

我已经设法通过将@d.ID 分配为我的跨度标签的ID 来做到这一点，因此每个Comment 都会有一个唯一的ID。

然后，我会将 id 保存到一个全局变量中，每次单击评论行上的铅笔按钮时，我都会重新分配该变量。

下面的JQuery：

    // open modal to submit dif comment
    $(".difcomment").click(function () {           
        questionID = $(this).parent('td').find('span').prop('id')
        $('#addeditdifcomments').modal('show');
    });

    // submit comment
    $(".submitdifcomment").click(function () {

        var difInfo = $(".difinfo").val();
        var path = "span#" + questionID;

        $(path).text(difInfo);

        $(".difinfo").val('');

        $("#addeditdifcomments").modal('hide');
    });