Inserting ContentEditable into an HTML table

Question

I am storing the html for a table in $scheduletext. I want to be able to edit any cell of the table when clicking it so I am using JQuery for the on click action. When I click on a cell it goes blank but will not allow me to type in it, what do I need to change to be able to type into this?

<html>
    <body>         
        <div id="main">
            <?php 
                print_r($scheduletext);
            ?> 
        </div>
        <script type="text/javascript">
            $('td').click(function(){
                $(this).html("<contenteditable>");
            });
        </script>
    </body>
</html>

For editing and testing purposes, since to run my code you also need the table, the CSS doesnt hurt either... I dumped it into JSfiddle to hopefully make it easier for anyone trying to give me a hand : https://jsfiddle.net/4yczepsj/ Thanks in advance!!

EDIT: For some reason JSfiddle doesnt do anything at all when clicked on, but on the live model on my site the cell goes blank when clicked, but nothing can be entered.

You need to include jQuery in JSFiddle. This can be done by clicking on the top-right "JavaScript" button in the JS box. — Quangdao Nguyen, Oct 25 '16 at 15:16

score 1 · Answer 1 · answered Oct 25 '16 at 15:08

1

In calling .html("<contenteditable>") you're modifying the inner HTML of your td element to contain a <contenteditable> element (which isn't valid). What you actually want to do is set the contenteditable property:

$(this).prop('contenteditable', true);

answered Oct 25 '16 at 15:08

James Donnelly

126,410
34
208
218

score 0 · Answer 2 · answered Oct 25 '16 at 15:08

0

contentEditable is an attribute.

Try this :

$(this).attr('contentEditable', true);

answered Oct 25 '16 at 15:08

Steeve Pitis

4,283
1
21
24

score 0 · Answer 3 · answered Oct 25 '16 at 15:11

0

Content Editable is an attribute, not an element. You want to add the attribute contenteditable to the the elements you want to have editable content.

$('td').click(function(){
    $(this).attr("contenteditable");
});

answered Oct 25 '16 at 15:11

Andrew Burns

324
4
10

score 0 · Answer 4 · answered Oct 25 '16 at 15:13

0

https://jsfiddle.net/4yczepsj/1/

$('table').on('mousedown', 'td', function (event) {
  $(event.target).closest('td').prop("contentEditable", true);
});

answered Oct 25 '16 at 15:13

Qwertiy

19,681
15
61
128

Mobius · Answer 5 · 2016-10-25T17:25:26.580

NOTE this includes information that the other answers contain, credit to them, but I am adding a little bit more and putting it all on one place.

I made the following changes:

added tabindex so table cells are tabable.
give focus to the table cell on click.
add contenteditable attribute on focus.
select contents of table cell on focus.
remove contenteditable on blur(when the td loses focus).

function setSelection(element) {
  // code for selection from http://stackoverflow.com/questions/3805852/select-all-text-in-contenteditable-div-when-it-focus-click#answer-3806004
  setTimeout(function() {
    var sel, range;
        if (window.getSelection && document.createRange) {
            range = document.createRange();
            range.selectNodeContents(element);
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.body.createTextRange) {
            range = document.body.createTextRange();
            range.moveToElementText(element);
            range.select();
        }
  }, 0)
}

// add tabindex to all tds.
$('td').attr('tabindex', 0);

$('td').on('focus', function() {
  $(this).attr('contenteditable', true);
  setSelection(this);
}).on('blur', function() {
  $(this).attr('contenteditable', false);
})

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  font-size: 90%;
}
th,
td {
  padding: 8px;
}
td {
  text-align: center;
}
table {
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<div id="main">
  <table>
    <tr>
      <th></th>
      <th>22oz Dark</th>
      <th>12ct 4oz Dark</th>
    </tr>
    <tr>
      <th>2016-01-01</th>
      <td>9785</td>
      <td>2478</td>
    </tr>
    <tr>
      <th>2016-01-02</th>
      <td>8754</td>
      <td>2136</td>
    </tr>
    <tr>
      <th>2016-01-03</th>
      <td>13587</td>
      <td>2203</td>
    </tr>
    <tr>
      <th>2016-01-04</th>
      <td>14111</td>
      <td>3297</td>
    </tr>
    <tr>
      <th>2016-01-05</th>
      <td>13212</td>
      <td>3101</td>
    </tr>
    <tr>
      <th>2016-01-06</th>
      <td>16335</td>
      <td>3299</td>
    </tr>
    <tr>
      <th>2016-01-07</th>
      <td>15421</td>
      <td>3100</td>
    </tr>
  </table>
</div>
</body>

</html>

Inserting ContentEditable into an HTML table

5 Answers5