Trim values in table cells by number of characters

Question

On the Internet I found such a function for cutting text by count of characters per line:

function cutter (str, charsQuantity, dots) { return str.substring(0, charsQuantity) + dots; }

I want to apply it to the table, but I stop on how to return its processed value to each cell.

A table, for example, is this:

 <table> <tr> <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, suscipit!</td> <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, voluptate!</td> </tr> <tr> <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, accusantium?</td> <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, minus!</td> </tr> </table>

I tried options like the options below and similar ones, but obviously somewhere I write something wrong:

  $('table tr td').each( function cutter () { return $(this).html().substring(0, 60) + '...'; });

I think from the name of the function itself it is clear that replace is a replacement
@lexxl your only problem is that $(this).html() you take the value and cut out 60 characters from it, and you add the ellipsis, BUT, you do not assign the current value to the current element.
if you add $(this).html($(this).html().substring(0, 60) + '...') , then everything will work.

Accepted Answer · 2016-06-08T08:25:35

As an example from the comment:

 $('table tr td').each(function () { var current = $(this); current.html(current.html().substring(0, 60) + '...'); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, suscipit!</td> <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, voluptate!</td> </tr> <tr> <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, accusantium?</td> <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, minus!</td> </tr> </table>

The reason for not working your code is that you are not assigning a new value to a cell, but simply (in an empty) perform the trimming of the string.

But how else can we introduce a variable so that the original text can be displayed on a hover, for example?
add for example, well, it turns out that a hint will hang on the cell, but it is better to add a block inside the cell and hang it.
By the way, it is better to use current.text () to take and set values, and if there is at least some html code, it will cut the closing tags for you
I would like to create a tooltip and put the full text in it.
for the sake of customization and other things ... but I can't get the original text
@lexxl Well, when I did this, my tooltip component took values from data-title .

Trim values in table cells by number of characters

1 answer 1

More articles:

Trim values ​​in table cells by number of characters

1 answer 1

More articles:

Trim values in table cells by number of characters