Javascript 单击事件，显示弹出窗口或关注文本框以添加注释

我正努力实现以下目标。我仍在编写时间表，用户必须能够添加注释

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？我目前正在使用SpringMVC，因此它应该获取该值并将其添加到特定的modelattribute中，以便提交

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

我使用Javascript实现了这一点

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

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

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

为了保存注释值，我使用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");
        }       
    }

---

我使用popBox jQuery插件成功地做到了这一点。效果不错！

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