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
const titles = document.querySelectorAll('.title');
const titleLength = 15;
titles.forEach(el => {
el.innerText = `${el.innerText.substring(0, titleLength)}...`;
})
explanation: substring.
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>