JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>		
    <th>Filename</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>		
      <td class="trunc">app/app/app/aaap/filename1</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>		
      <td class="trunc">app/app/app/aaap2222222//filename2</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
      <td class="trunc">app/app/app/ffff//dddddd//aaap/filename4</td>
  </tr>
</table>

CSS

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
}

JavaScript

$(function () {
    $('.trunc').html(function(i,v){
        console.log(i,v)
        return v.split('/').pop()
    })
                
});