Working with the table, I came across one problem, inside this table there are such data as:

  1. Item id
  2. Object name
  3. Object type
  4. Object coordinates

In point 4, where the coordinates of the object are written, the coordinates are too long, my task is to shorten this length:

Here is the table itself:

<table> <tr> <th>ID</th> <th>Name</th> <th>Type</th> <th>Coordinates</th> </tr> <tr> <td> <b><i>16</i></b> </td> <td> TestPoint1 </td> <td> Parking </td> <td> <span class="substring">40.381272280500674</span> : <span class="substring">49.842752143408234</span> </td> </tr> <tr> <td> <b><i>17</i></b> </td> <td> TestPoint2 </td> <td> Bankomat </td> <td> <span class="substring">40.382694313910996</span> : <span class="substring">49.84732262756961</span> </td> </tr> <tr> <td> <b><i>18</i></b> </td> <td> TestPoint3 </td> <td> Bank </td> <td> <span class="substring">40.379703105349265</span> : <span class="substring">49.84206549790042</span> </td> </tr> </table>

As you can see, the coordinates are long and you need to reduce their length.

I wrote a script using jQuery

 $(".substring").substring(0,9);

This code does not work, or I'm doing something wrong. Please help to deal with the problem.

    2 answers 2

    The selector returns an array of DOM elements corresponding to the selector. Naturally, there is no substring method for this array. It is necessary to sort the elements of the collection and change the text of each of them. For the first, you can use .each () , and for the second, .text ()

     $('.substring').each(function() { $(this).text($(this).text().substring(0, 9)); }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <th>ID</th> <th>Name</th> <th>Type</th> <th>Coordinates</th> </tr> <tr> <td> <b><i>16</i></b> </td> <td> TestPoint1 </td> <td> Parking </td> <td> <span class="substring">40.381272280500674</span> : <span class="substring">49.842752143408234</span> </td> </tr> <tr> <td> <b><i>17</i></b> </td> <td> TestPoint2 </td> <td> Bankomat </td> <td> <span class="substring">40.382694313910996</span> : <span class="substring">49.84732262756961</span> </td> </tr> <tr> <td> <b><i>18</i></b> </td> <td> TestPoint3 </td> <td> Bank </td> <td> <span class="substring">40.379703105349265</span> : <span class="substring">49.84206549790042</span> </td> </tr> </table>

    Variant of the neighboring answer, using only the text method

     $('.substring').text(function(index, oldText) { return oldText.substring(0, 9); }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <th>ID</th> <th>Name</th> <th>Type</th> <th>Coordinates</th> </tr> <tr> <td> <b><i>16</i></b> </td> <td> TestPoint1 </td> <td> Parking </td> <td> <span class="substring">40.381272280500674</span> : <span class="substring">49.842752143408234</span> </td> </tr> <tr> <td> <b><i>17</i></b> </td> <td> Kenan </td> <td> Bankomat </td> <td> <span class="substring">40.382694313910996</span> : <span class="substring">49.84732262756961</span> </td> </tr> <tr> <td> <b><i>18</i></b> </td> <td> TestPoint3 </td> <td> Bank </td> <td> <span class="substring">40.379703105349265</span> : <span class="substring">49.84206549790042</span> </td> </tr> </table>

    In addition, you can try to solve without js, using only css.

     .substring { max-width: 68px; overflow: hidden; display: inline-block; vertical-align: middle; } 
     <table> <tr> <th>ID</th> <th>Name</th> <th>Type</th> <th>Coordinates</th> </tr> <tr> <td> <b><i>16</i></b> </td> <td> TestPoint1 </td> <td> Parking </td> <td> <span class="substring">40.381272280500674</span> : <span class="substring">49.842752143408234</span> </td> </tr> <tr> <td> <b><i>17</i></b> </td> <td> Kenan </td> <td> Bankomat </td> <td> <span class="substring">40.382694313910996</span> : <span class="substring">49.84732262756961</span> </td> </tr> <tr> <td> <b><i>18</i></b> </td> <td> TestPoint3 </td> <td> Bank </td> <td> <span class="substring">40.379703105349265</span> : <span class="substring">49.84206549790042</span> </td> </tr> </table>

    • from the first code, what is there for index and oldtext ?? - E1mir
    • @KryTer_NexT, these are the parameters, they are described in the link help: index - the index of the currently selected item to which the function is applied, oldText is the current value of the property, in this case text - Grundy
    • Ahhh now it is clear) Here is the implementation using css cool, I did not think that this is possible too) - E1mir
    • @KryTer_NexT, in the css implementation it all depends on the width of the text. It’s just that the maximum width is set and everything else is just not visible. For another set of numbers / font, you will most likely have to use a different size. It is better to use a monospace font so that the width of the element depends only on the number of digits and not on the numbers themselves - Grundy