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

Posted 2023-05-09

【中文标题】在动态表中添加/编辑评论字段值

【英文标题】：Add/edit Comments field value in a dynamic table

【发布时间】：2020-02-10 23:47:43

【问题描述】：

我从 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  >@d.Description</td>
               <td >
                <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');
    );    

);

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

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

【问题讨论】：

1) 也许您需要引用特定的差异评论元素（例如，将唯一的 id 分配给 并从 $(".submitdifcomment").click() ) 和 2) 使用 .text(difInfo) 设置链接文本？

您想要特定行更新单击在弹出窗口中打开的一行数据并更改数据并保存？

@yob 谢谢，听起来很有希望。明天会试一试并发布任何更新。

【参考方案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');
    );

【讨论】：

您还可以在数据属性中分配和存储 ID 的值：，然后 onclick 将其分配给 $('#addeditdifcmets').attr("data-id", $(this).attr("data-id") )，然后从 submit.click.. 中引用它。 ...