I fill the table data from the database. All its contents are built and filled in a loop in ajax:

 function ForSearching(args, callback) { $.ajax({ url: "/source_pages/SearchForMultilang.ashx", type: "POST", dataType: "json", data: args, }).success(function(data) { var table = $("#tablem tbody"); $("#tablem tbody").empty(); callback(data); $.each(data, function (idx, elem) { table.append('<tr data-id=' + elem.Id + '><td id="pname">' + elem.PageName + '</td><td id="lang">' + elem.Lang + '</td><td id="CName">' + elem.ControlName + '</td><td id="CValue">' + elem.ControlValue + '</td><td id="btnRow"><input type="button" onclick=edtClick(this) id="btnedt" value="Edit" /></td></tr>'); }); }); }

The request is executed, the table is built. But in the <td id="CValue"> elem.ControlValue value of elem.ControlValue sometimes very large. How to make it so that not all data is displayed in the cell, but only a part, for example, 200 characters. In this case, when editing a row, when all the cells of the row are transformed into a <input type='text'> with values, the entire elem.ControlValue ? Value would be displayed in the input?

    1 answer 1

     function reduceControlValue(aValue) { if (aValue.length > 200) return aValue.substr(0, 200) + "..."; else return aValue; } $.each(data, function (idx, elem) { table.append('<tr data-id=' + elem.Id + '>' + '<td id="pname">' + elem.PageName + '</td>' + '<td id="lang">' + elem.Lang + '</td>' + '<td id="CName">' + elem.ControlName + '</td>' + '<td id="CValue">' + '<span style="display:none" class="fullvalue">' + elem.ControlValue + '</span>' + reduceControlValue(elem.ControlValue) + '</td>' + '<td id="btnRow"><input type="button" onclick=edtClick(this) id="btnedt" value="Edit" /></td></tr>' ); });

    and take the value to edit from $("span.fullvalue").text() corresponding table row.

    PS You create elements with duplicate id . This is contrary to the html specification and may lead to problems in the future.