CODEWITHSUNDEEP
javascript
ChandanKalita
ChandanKalita

Reputation: 21

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

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

Upvotes: 2

Views: 85

Answers (2)

Maik Lowrey
Maik Lowrey

Reputation: 17566

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>

Upvotes: 0

Michael Mano
Michael Mano

Reputation: 3440

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

explanation: substring.

Upvotes: 1

Related Questions