JavaScript - dynamic resizing of cells in html table

[wannasee]

Hello everybody,

I am new at javascript and I would like to write a script that resizes the input fieds of an html table depending on the entered text. The input fields are placed in table cells (using <tr> and <td>) arranged like an Excel sheet.

Requirements to my script are the following:

1- When an entered text is longer than the length of the input field (there is overflow), then the script should automatically insert a linebreak and continue entering at the next line of the field; of course the field has then to be higher (value of height attributeincreases), so that the whole text is visible.

2- If the cell of an input field becomes becomes higher then all cells in the same row must have the same height

3- If text of an overflowed input cell is partially delete so that the text length is now smaller than cell length, the height of the cell should then be decreased to the standard length and height.


4- the automatic resizing of a cell in a row should not affect the size of cells that are not in that row

Does somebody knows where I should begin? How does one perform such a task using JavaScript?

Thank you for your help. I am really desperated

Regards

[Dormilich]

1 - how about a <textarea>? this does self wrap if the text is longer than its width. (plus you do not have to remove the line breaks later...) and I'm not sure if you get more than one line in a text input field.
2 - use DOM to get all elements in the same row (first get the row which contains your element, then access all relevant elements within that)
3 - just make the textarea high enough, imho some scrolling is acceptable.
4 - see 2

regards

[wannasee]

Hi Dormilich,

thanks for your answer. I will try your suggestion and give then feedback.
Bye