OnClick 事件，显示弹出窗口或聚焦于文本框以添加评论

Question

我想要实现的目标如下。我（仍在）处理时间表，用户必须能够添加评论。

D2 的评论 [ ................. ]

TaskID - Taskname - D1 - D2 - D3 ...
1        Hello      5    3    2
2        Bai        4    2    1
3        I'm back   3    4    3

当用户单击特定文本框时，他必须填写时间，附加文本框应获得评论值那个特定的盒子。当他单击另一个文本框时，它应该获得该值等。

我真的不知道在哪里寻找，或者如何才能做到最好。有什么想法吗？ JavaScript？ jQuery？我目前正在使用 Spring MVC，因此它应该获取该值并将其添加到特定的模型属性中，以便可以提交。

另一种可能性是某种弹出窗口，当您单击文本框旁边的图标时会出现......

Answer 1

我使用Javascript来实现这一点。

输入某个字段后，我会调用一个函数来用新的类名填充注释：

<input type="text" onfocus='addComment(id, index, taskid)' />

函数：

    function addComment(classname, commValue, taskid){
    var comm = document.getElementById('comment');
    var comment = document.getElementById(taskid + classname);
    comm.className = taskid + classname;
    comm.value = comment.value;
}

这将使用最新聚焦文本框中的值填充文本框。它还将使用提供的类名来设置类名。

为了保存评论值，我使用 jQuery Ajax：

function saveComment(){
        var comment = document.getElementById('comment');
        var classn = comment.className;
        var firstday = document.getElementById('firstweek').value;
        var commentval = comment.value;
        var windex = comment.className.indexOf("w");
        var day = comment.className.substring(windex+1, windex+2);
        var taskid = comment.className.substring(0, windex);
        var pid = document.getElementById('projectid').value;

        if (classn != ""){
            var commentSaved = document.getElementById(taskid+comment.className.substring(windex, windex+2));
            commentSaved.value = commentval;
            $.post("savecomm.html", { day: day, comment: commentval, taskid: taskid, firstday: firstday, pid: pid }, function(data) {
                alert("callback");  
            });  
        } else {
            alert("No entries selected");
        }       
    }