2

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

Improve this question
2
  • you want trim all td's or only the td's with class title? Commented Nov 3, 2021 at 6:03
  • @MaikLowrey only the class title, i wrote some code which only effect when there is only i title Commented Nov 3, 2021 at 6:05

2 Answers 2

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

explanation: substring.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.