CODEWITHSUNDEEP
javascriptjquery
Alda
Alda

Reputation: 27

I need a dropdown text box in Javascript (jQuery?)

I have to make a page with a huge table of data, and it has to be editable. The problem is, some of the fields are supposed to be very long (hundreds of characters), and I need some sort of way to enter this text without disrupting the table's layout, but showing the users the entire text while they're typing.

A good solution would be something that looks just like a vanilla 1-line text box which, when clicked, slides out, pretty much like a <select>, lets the user type in all the text he wants, and then shrinks back to text box size when the user clicks away.

I'm sure there must be something like that for jQuery, but I just can't find it.

Here's how it should act:

https://i.sstatic.net/PMzbN.png

Upvotes: 1

Views: 435

Answers (3)

emilyk
emilyk

Reputation: 713

Here's what I figured out playing around with some javascript

http://jsfiddle.net/bsWy6/

You can mess with the styling until it is exactly what you want. I think it's pretty close to what you're looking for though.

I am assuming you are populating your table from a database? If that's true, I would use php to generate the id's so that you don't have to type them for every single row, since your functions need to know the exact cell it's working with. If you want help with that code too, just let me know and I'll post it up here. I'm just not sure if you've done anything with php, so I don't want to go into all of it if you don't want it.

Good luck!

Upvotes: 1

intellidiot
intellidiot

Reputation: 11228

I think NicEditor will fit the need. See their inline editing demo.

Upvotes: 1

dotancohen
dotancohen

Reputation: 31521

For each cell, make two fields:

<td id="td-1-2">
    <p id="p-1-2">Some text to...</p>
    <textarea id="ta-1-2">Some text to...</textarea>
</td>

Then hide the <textarea> and show the <p>. When the user clicks the <p> then hide the <p> and show the <textarea>. Either put a submit button below the textarea or save its contents when it looses focus.

Upvotes: 0

Related Questions