Проблема с input и style.display
 

Есть такая задача: "Написать на Javascript реакцию на клик мышкой по любой ячейке
нижней таблицы, так чтобы при клике на ячейку она становилась
невидимой (свойство стиля display = none), а нажатие соответствующей
кнопки в ячейку верхней таблицы возвращало бы скрытую ячейку в нижней
таблице назад." и "Добавить под элементом <div> из п.3 поле для текстового ввода
(<input type=text...>) и кнопку рядом с ней. Написать реакцию на нажатие
этой кнопки так, чтобы набраный в поле для ввода текста на момент нажатия
текст "приклеевался" бы к содержимому левой верхней ячейки нижней таблицы.
(Например: в ячейке написано "Some text" и размещена картинка
("Some text<картинка>"). Мы набираем в поле для ввода текста "More text" и
нажимаем на кнопку. В результате содержимое левой верхней ячейки
меняется на "Some text<картинка>More text")"

Вот сам код для пункта 1
<table border="2">

<tr>
<td id=qq1 class=q1 onClick="style.display=' table-row';">Some text<br><img src=2.jpg></td>
<td id-il onClick="style.display=' table-row';">www</td>
<td id=mbi onClick="style.display=' table-row';"><img src=333.jpg></td>
</tr>

<tr>
<td id=rty onClick="style.display=' table-row';" >nnn</td>
<td id=rot onClick="style.display=' table-row';" onMouseOver='document.getElementById("ror").innerH TML="rot";'>rot</td>
<td id=ii1 onClick="style.display=' table-row';" onMouseOver='document.getElementById("ror").innerH TML="<img src=2.jpg>";'>iii</td>
</tr>

<tr>
<td class=m1 id=mmom onClick="style.display=' table-row';"
onMouseOver='document.getElementById("ror").innerH TML="mmom";'>mmom</td>
<td id=pot onClick="style.display=' table-row';"><img src=2.jpg></td>
<td id=hu onClick="style.display=' table-row';">rrr</td>
</tr>

</table>

Вот для второго
<div class='wow' id=ror>xcdfghdsfh</div>
<input type=text id=txt1><br>
<input type=button value="knopca"
onClick="document.getElementById('qq1').innerHTML= Some text<br><img src=2.jpg><br>More text;

Помогите пожалуйста разобраться.