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，因此它应该获取值并将其添加到特定的modelattribute，以便可以提交。

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

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");
        }       
    }