CODEWITHSUNDEEP
javascripthtmljquerycss
user451513
user451513

Reputation:

Javascript / JQuery Contenteditable resize handles should set table column width parameter

I'm looking for a solution primarily supported by Webkit browsers (Chrome / Edge / Safari) that allows table columns to change the actual width of these columns when the resize property is set in a contenteditable field. Now here's what I've done so far.

I've added the resize handles in the first row of the columns by adding the following CSS (.editortable is the class for the tables) :

.editortable tr:first-child td {
    padding: 4px;
    cursor:pointer;
    resize:both;
    border: 1px dotted #333;
    overflow:auto;
}

This shows the resize handles in the contenteditable field, allowing for rescaling the table columns. But what it doesn't do, is set the new width and height in the underlying HTML by adding a "width" and "height" attribute with the appropriate values. How can this be done in either vanilla javascript or JQuery?

Sorry for my English, it's not my native language. I hope you guys understand what I'm trying to accomplish here.

<div contenteditable="true">
    <table class="editortable">
      <tr>
         <td>1</td><td>Just some text</td>
      </tr>
    </table>
</div>

Here's the fiddle; https://jsfiddle.net/7trwxoug/

Upvotes: 0

Views: 295

Answers (1)

Josh Lin
Josh Lin

Reputation: 2437

I think you need MutationObserver, I added example code to watch the change of second td, you can watch any cell as you like, after watch whenever you resize a cell, the callback can get the latest widht/height, and you can set/log or other action according to widht/height and id you get

https://jsfiddle.net/46tamyzp/10/

enter image description here

Upvotes: 1

Related Questions