textarea innerHTML / html() не работает

113

02 февраля 2021, 23:50

По клику на ячейке таблицы, с помощью js в ячейку добавляется код галочки

$(this).css('text-align','center').html('&#10003;');

но некоторые галочки не отображаются. Почему?
т.е. в каждой ячейке находится textarea, и внутрь textarea добавляется код галочки.
пример ячейки:

<td>
<label for="cell-B5"><span class="screen-reader-text">Колонка 2, Строка 5</span></label>
<textarea name="table[data][4][1]" id="cell-B5" rows="1" style="text-align: center;">✓</textarea>
</td>

https://jsfiddle.net/0qftgcw9/1/

Answer 1

Как оказалось... менять .html() элемента textarea можно только до тех пор, пока кто-то вручную или скриптом не поменял его значение .val(). Поэтому, всегда добавлять html() в textarea невозможно, нужно организовать всё через val()

*JS-аналоги: .innerHTML = '✓'; и .value = '✓';

**Сам HTML-то меняется. Визуального отображения нет.

***Там вы лишний раз при каждом клике делали text-align: center... легче это один раз задать в CSS и забыть о нем.

JsFiddle

$('td').on('click', function(){ 
  $(this).find('textarea').val('✓'); 
}); 
 
$('#ok').on('click', function(){ 
  $('textarea').val(''); 
});

textarea {text-align: center;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<table> 
  <tr> 
    <td> 
<textarea name="table[data][4][1]" id="cell-B5" rows="1" style="text-align: center;">✓</textarea> 
</td> 
    <td> 
<textarea name="table[data][4][1]" id="cell-B5" rows="1" style="text-align: center;">✓</textarea> 
</td> 
    <td> 
<textarea name="table[data][4][1]" id="cell-B5" rows="1" style="text-align: center;">✓</textarea> 
</td> 
  </tr> 
    <tr> 
    <td> 
<textarea name="table[data][4][1]" id="cell-B5" rows="1" style="text-align: center;">✓</textarea> 
</td> 
    <td> 
<textarea name="table[data][4][1]" id="cell-B5" rows="1" style="text-align: center;">✓</textarea> 
</td> 
    <td> 
<textarea name="table[data][4][1]" id="cell-B5" rows="1" style="text-align: center;">✓</textarea> 
</td> 
  </tr> 
  <table> 
  <tr> 
    <td> 
<textarea name="table[data][4][1]" id="cell-B5" rows="1" style="text-align: center;">✓</textarea> 
</td> 
    <td> 
<textarea name="table[data][4][1]" id="cell-B5" rows="1" style="text-align: center;">✓</textarea> 
</td> 
    <td> 
<textarea name="table[data][4][1]" id="cell-B5" rows="1" style="text-align: center;">✓</textarea> 
</td> 
  </tr> 
    <tr> 
    <td> 
<textarea name="table[data][4][1]" id="cell-B5" rows="1" style="text-align: center;">✓</textarea> 
</td> 
    <td> 
<textarea name="table[data][4][1]" id="cell-B5" rows="1" style="text-align: center;">✓</textarea> 
</td> 
    <td> 
<textarea name="table[data][4][1]" id="cell-B5" rows="1" style="text-align: center;">✓</textarea> 
</td> 
  </tr> 
    <tr> 
      <td><textarea name="" id="" cols="" rows=""></textarea></td> 
      <td><textarea name="" id="" cols="" rows=""></textarea></td> 
      <td><textarea name="" id="" cols="" rows=""></textarea></td> 
    </tr> 
</table> 
</table> 
 
 
<button id="ok">Убрать всё</button>