Отдельные всплывающие окна для каждой ячейки таблицы
 

Доброго времени суток, уважаемые программисты, верстальщики и все все. Возникла проблема, в которой самостоятельно разобраться не получается а ответа годного который наставил бы на путь истинный в интернете не нашёл. Суть: есть html таблица в каждой to которой есть отдельные divы под определенные данные. При нажатии на любую ячейку РЯДОМ с боку появляется окошко для добавления/редактирования этих самых данных в ячейке. Вопрос в том, как через js сделать так, чтоб при нажатии на любую ячейку рядом с ней всплывало это самое окошко в котором я мог бы редактировать данные этой ячейки? Из всех прочитанных материалов понимаю, что из ячеек нужно сделать массив, но не понимаю как правильно это все сделать, так как навыков в js уж совсем мало.:(

Это не обязательно...
Можно обойтись одним окном, которое будет абсолютно позиционироваться относительно всей таблицы.
Останется только правильно вычислять координаты верхней точки этого окна.

А дополнительное окошечко обязательно нужно?

<table border="1" width="200">
   <tr>
     <td>
         <div contenteditable>div 111</div><div contenteditable>div 112</div>
     </td>
     <td>
         <div contenteditable>div 121</div><div contenteditable>div 122</div>
     </td>
   </tr>
   <tr>
     <td>
         <div contenteditable>div 211</div><div contenteditable>div 212</div>
     </td>
     <td>
         <div contenteditable>div 221</div><div contenteditable>div 222</div>
     </td>
   </tr>
</table>

Нет, там обязательно у каждой ячейки должно появляться это самое окно, которое относительно этой ячейки определенным спозиционировано (справа)

Да, окошко нужно обязательно, оно имеет свой стиль, так дизайн предусматривает)

Одновременно могут быть видны несколько таких окон?

Ну, насчет стиля...

<style>
button { display:none;}
td:hover div { background-color: lightgreen; }
td:hover button { display:block; }
</style>
<table border="1" width="200">
   <tr>
     <td>
         <div contenteditable>div 111</div><div contenteditable>div 112</div>
        <button>Запись</button>
        <button>Отмена</button>
     </td>
     <td>
         <div contenteditable>div 121</div><div contenteditable>div 122</div>
     </td>
   </tr>
   <tr>
     <td>
         <div contenteditable>div 211</div><div contenteditable>div 212</div>
     </td>
     <td>
         <div contenteditable>div 221</div><div contenteditable>div 222</div>
     </td>
   </tr>
</table>

Или так

<style>
table { position:relative; top: 20px; left:50px;}
td:hover  {transform: scale(1.5); }
td:hover div { background-color: lightgreen; }

</style>
<table border="1" width="200">
   <tr>
     <td>
         <div contenteditable>div 111</div><div contenteditable>div 112</div>
     </td>
     <td>
         <div contenteditable>div 121</div><div contenteditable>div 122</div>
     </td>
   </tr>
   <tr>
     <td>
         <div contenteditable>div 211</div><div contenteditable>div 212</div>
     </td>
     <td>
         <div contenteditable>div 221</div><div contenteditable>div 222</div>
     </td>
   </tr>
</table>