Ячейка таблицы с содержимым имеет следующий вид:
'<td id="CValue">' + '<span style="display:none" class="fullvalue">' + elem.ControlValue + '</span>' + reduceControlValue(elem.ControlValue) + '</td>'
elem.ControlValue
- это текст с html-тегами, который необходимо отображать в яейке. Так как этот текст очень большой, я его обрезаю функцией reduceControlValue
, и вывожу его в ячейке.
function reduceControlValue(aValue) {
if (aValue.length > 200) {
return aValue.substr(0, 200) + "...";
} else {
return aValue;
}
}
В каждой строке есть кнопка edit
, при нажатии на которую ячейка меняет свой вид, в ней появляется textarea
, в которой отображается весь текст elem.ControlValue
, не обрезанный.
function edtClick(button) {
var par = $(button).parent().parent(); //tr
var cvalue = par.children("td#CValue");
var Ftext = par.children("td#CValue").children("span.fullvalue").text();
cvalue.html("<textarea id='txtCvalue'>"+ Ftext +"</textarea>");
}
Кроме кнопки edit
есть кнопка cancel
, при нажатии на которую ячейка должна приобретать первоначальный вид - то есть textarea
со всем текстом заменяется обратно на весь текст, который не отображается, и на показанную обрезанную часть:
function Cancel(button) {
var par = $(button).parent().parent(); //tr
var cvalue = par.children("td#CValue");
var cvalueNew = cvalue.children("textarea#txtCvalue").val();
var cvalueShort = reduceControlValue(cvalueNew);
cvalue.html('<span style="display:none" class="fullvalue">' + cvalueNew + '</span><code>' + cvalueShort + '</code>');
};
Проблема в том, что в данном случае, в ячейку записывается только часть <span style="display:none" class="fullvalue">' + cvalueNew + '</span>
, которая не отображается, а обрезанная часть вообще исчезает.
А если отображать только обрезанную часть в тегах <code>
, то эти теги не срабатывают и html-теги в тексте преобразовывают текст.