Вставка ContentEditable в таблицу HTML

Я храню html для таблицы в $ scheduletext. Я хочу, чтобы иметь возможность редактировать любую ячейку таблицы при нажатии на нее, поэтому я использую JQuery для действия по щелчку. Когда я нажимаю на ячейку, он пуст, но не позволяет мне вводить его, что мне нужно изменить, чтобы иметь возможность вводить в это?Вставка ContentEditable в таблицу HTML

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

Для редактирования и тестирования, так как запустить свой код, необходимо также таблицу, то CSS оленья кожа помешают ... Я бросил его в JSfiddle, мы надеемся сделать его проще для тех, кто пытается дать мне руку : https://jsfiddle.net/4yczepsj/ Спасибо заранее!

EDIT: По какой-то причине JSfiddle вообще ничего не делает, когда нажимается, но в живой модели на моем сайте ячейка гаснет при нажатии, но ничего не может быть введено.

источник

2016-10-25 Brandon

Вам нужно включить JQuery в JSFiddle. Это можно сделать, нажав на верхнюю правую кнопку «JavaScript» в поле JS. –

При вызове .html("<contenteditable>") вы изменяете внутренний HTML-код своего td, чтобы содержать элемент <contenteditable> (что недопустимо). То, что вы на самом деле хотите сделать, это установить contenteditable свойство:

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

источник

2016-10-25 15:08:55

contentEditable является атрибутом.

Попробуйте это:

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

источник

2016-10-25 15:08:59

Содержание редактируемые является атрибутом, не является элементом. Вы хотите добавить атрибут contenteditable к элементам, которые должны иметь редактируемый контент.

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

источник

2016-10-25 15:11:37

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

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

источник

2016-10-25 15:13:26 Qwertiy

Примечание это включает в себя информацию о том, что другие ответы содержат, кредит на них, но я добавляю немного больше и положить все это на одном месте.

Я сделал следующие изменения:

добавлен TabIndex так таблица клетки tabable.
уделять внимание ячейке таблицы при нажатии.
Добавить contenteditable атрибут на фокус.
выберите содержимое ячейки таблицы на фокусе.
удалить contenteditable на blur (когда тд теряет фокус).

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>

источник

2016-10-25 15:52:16 Mobius

Вставка ContentEditable в таблицу HTML

ответ

Смежные вопросы