How to shorten a column data of a table and add dots after a specific limit using javascript

user_17033709 0
Viewed 35

I have a table

<table>
<tr>
    <td class="title"> Lorem ipsum dolor sit amet consectecons sit amet consectecons </td>
    <td>Lorem ipsum dolor sit amet consectecons sit amet consecteconsLorem ipsum dolor sit amet consectecons sit amet consectecons</td>
    <td>Lorem ipsum dolor</td>
    <td>Lorem ipsum dolor</td>
</tr>
<tr>
    <td class="title"> Lorem ipsum dolor sit amet consectecons sit amet consectecons </td>
    <td>Lorem ipsum dolor sit amet consectecons sit amet consecteconsLorem ipsum dolor sit amet consectecons sit amet consectecons</td>
    <td>Lorem ipsum dolor</td>
    <td>Lorem ipsum dolor</td>
</tr>
<tr>
    <td class="title"> Lorem ipsum dolor sit amet consectecons sit amet consectecons </td>
    <td>Lorem ipsum dolor sit amet consectecons sit amet consecteconsLorem ipsum dolor sit amet consectecons sit amet consectecons</td>
    <td>Lorem ipsum dolor</td>
    <td>Lorem ipsum dolor</td>
</tr>
</table>

Now take class title i want to trim the data of title class and add (...) after a specific length using javascript there can be multiple <td> Help me

javascript
2 Answers
const titles = document.querySelectorAll('.title');
const titleLength = 15;
titles.forEach(el => {
  el.innerText = `${el.innerText.substring(0, titleLength)}...`;
})

explanation: substring.

user_60913080

Fetch the columns by class and substring the data and set it back.

const tds = document.querySelectorAll('td.title')
const length = 10;
tds.forEach((e) => {
  e.innerText = e.innerText.substring(0, length) + '...';
})
<table border="1">
<tr>
    <td class="title"> Lorem ipsum dolor sit amet consectecons sit amet consectecons </td>
    <td>Lorem ipsum dolor sit amet consectecons sit amet consecteconsLorem ipsum dolor sit amet consectecons sit amet consectecons</td>
    <td>Lorem ipsum dolor</td>
    <td>Lorem ipsum dolor</td>
</tr>
<tr>
    <td class="title"> Lorem ipsum dolor sit amet consectecons sit amet consectecons </td>
    <td>Lorem ipsum dolor sit amet consectecons sit amet consecteconsLorem ipsum dolor sit amet consectecons sit amet consectecons</td>
    <td>Lorem ipsum dolor</td>
    <td>Lorem ipsum dolor</td>
</tr>
<tr>
    <td class="title"> Lorem ipsum dolor sit amet consectecons sit amet consectecons </td>
    <td>Lorem ipsum dolor sit amet consectecons sit amet consecteconsLorem ipsum dolor sit amet consectecons sit amet consectecons</td>
    <td>Lorem ipsum dolor</td>
    <td>Lorem ipsum dolor</td>
</tr>
</table>

user_148071110
Related