Caixa de comentários ocultável

Question

Eu tenho um aplicativo de planilha de controle de tempo.Neste, exibirei as datas da semana no eixo X (em cima) e as tarefas no eixo Y (em baixo).Conforme mostrado abaixo, darei um ícone @ após cada caixa de texto para inserir comentários em cada entrada.

****************************************************
#    |  Sun | Mon  | Tue  | Wed | Thu |  Fri | Sat |
****************************************************
Task1 ____@ _____@ _____@ _____@_____@______@______@     
Task2 ____@ _____@ _____@ _____@_____@______@______@

Portanto, ao clicar neste ícone @, preciso abrir uma caixa flutuante (ou qualquer outro tipo de caixa de texto) para inserir comentários. Isso precisa ser ocultado após pressionar a marca X na caixa aberta.Como você pode esperar, preciso armazenar os comentários inseridos pelo usuário para enviar ao banco de dados.Então, como posso armazenar esses comentários como variáveis ​​de array.Concluí a codificação para entrada de tarefas e tabela total.Mas não consigo descobrir como abrir uma caixa de texto flutuante na posição de um ícone @ específico.E também depois de ocultá-los, não estou conseguindo uma maneira eficiente de armazenar esses comentários nessas tarefas específicas para um determinado dia.

Meu exemplo de Javascript:

function comment(id,day)
{
var textinput="<div id='closeit'>
                  Comments:<input type='text' name='comm["+id+"]["+day+"]' />
               </div>
               <div id='closing' onclick='closecomment("+id+","+day+")'>X
               </div>";
              $('#comms').html(textinput);
}
function closecomment(id,day)
{
        var str='"comm['+id+']['+day+']"';
        var element = document.getElementById(str);
        alert(element.value);
        closeit.style.visibility='hidden' // this is for hiding
    closing.style.visibility='hidden' // this is for hiding
    var newelement = document.getElementById(str);
    alert(newelement.value); //I am able to get the value but I am looking for         storing  it and filling the same text box when it is accessed again
}

Meu exemplo de HTML:

<input type="text" id="comm[0][0]" />
<input type="text" id="comm[0][1]" />
<input type="text" id="comm[1][0]" />
<input type="text" id="comm[1][1]" />

Por favor me ajude com exemplos que possam funcionar no IE6, IE7 ou 8.Meu ambiente é PHP (framework CodeIgniter), JQUERY, XAMPP.

Answer 1

Para a parte de armazenamento, você não precisa usar um array.Basta adicionar uma entrada oculta ao lado de cada link '@' (ou em qualquer lugar da página) com um nome significativo.Ao fechar o div flutuante, coloque o comentário na entrada oculta.Então seu arquivo php poderá ler e processar esses valores no envio.

Exibir uma div flutuante é apenas uma questão de posicionamento absoluto (ou relativo, se você quiser exibir próximo às células da tabela).Experimente este css:

div#comms {
  position: absolute;
  width: 300px;
  left: 50%;
  margin-left:-100px;
  height: 200px;
  top: 50%;
  margin-top:-150px;
}

Answer 2

Acho que existem vários plugins jQuery para o que você está tentando alcançar.Dê uma olhada nesta página de pesquisa:http://plugins.jquery.com/search/node/inline+edit

Nander