Techniques and Web Technologies
With insertRow() method you can insert a new row at the specified position in HTML table. After row is created, use insertCell() method to insert a table cell. Wrap this methods in JavaScript functions and you have code to dynamically add new rows and columns in the HTML table.
This post shows simple JavaScript drawing script based on HTML table. After page is loaded, JavaScript will generate HTML table and attach onMouseDown / onMouseUp event handlers to the document level and onMouseOver to each table cell. When user clicks the left mouse button and move mouse pointer over table, TD will change background colour.
Content of HTML table cells can be dragged to another cell or another table. It isn’t difficult to define onMouseMove handler and change top / left element styles to move the object. In case with tables, you will have to determine somehow destination cell. Attaching onMouseOver handler on TD elements will not work, because browser doesn’t fire events to the elements beneath the dragged object.