Automatically numbering table columns with custom language localization in JavaScript using Jquery

Question

Automatically numbering table columns with custom language localization in JavaScript using Jquery

Is there a method to automatically number table data in a local or custom language? As a Bengali individual, I have figured out how to automatically number the first data of each row using css and js. However, I am uncertain about how to implement custom numbering systems such as Bangla or Arabic.

Here is an example of my code:

<table border="1">
  <tr>
    <td>blue</td>
  </tr>
  <tr>
    <td>red</td>
  </tr>
  <tr>
    <td>black</td>
  </tr>
</table>

I would like something similar to this;

১. Apple ২. Banana ৩. Orange ৪. Strawberry

How can I achieve this using Javascript / jquery.. Without the use of any third party plugins?

javascript html jquery css

Answer 1

Answer №1

To format numbers based on different locales, you can utilize the toLocaleString() method or the Intl.NumberFormat() constructor along with specifying the desired locale language as a parameter.

For instance:

To display Arabic numbers: num.toLocaleString('ar-EG').
To show Bangla numbers: num.toLocaleString('bn-BD')

const table = document.querySelector('table');

[...table.rows].forEach((row, index) => {
  row.cells[0].textContent = (index + 1).toLocaleString('bn-BD')
})

<table border="1">
  <tr>
    <td></td>
    <td>blue</td>
  </tr>
  <tr>
    <td></td>
    <td>red</td>
  </tr>
  <tr>
    <td></td>
    <td>black</td>
  </tr>

Answer 2

To format numbers based on different locales, you can utilize the toLocaleString() method or the Intl.NumberFormat() constructor along with specifying the desired locale language as a parameter.

For instance:

To display Arabic numbers: num.toLocaleString('ar-EG').
To show Bangla numbers: num.toLocaleString('bn-BD')

const table = document.querySelector('table');

[...table.rows].forEach((row, index) => {
  row.cells[0].textContent = (index + 1).toLocaleString('bn-BD')
})

<table border="1">
  <tr>
    <td></td>
    <td>blue</td>
  </tr>
  <tr>
    <td></td>
    <td>red</td>
  </tr>
  <tr>
    <td></td>
    <td>black</td>
  </tr>

Answer 3

Answer №2

One way to achieve this using only CSS is by utilizing the CSS counter(..) function and specifying the counter-style parameter (list-style-type) for 'bengali'.

For example:

td::before { content: counter(some-counter, bengali) }

For more information, you can refer to the following resources: MDN: counter() and MDN: list-style-type

table {
    counter-reset: row 0;
}

tr {
    counter-increment: row;
}
td::before {
    content: counter(row, bengali) '. ';
}

<table border="1">
  <tr>
    <td>blue</td>
  </tr>
  <tr>
    <td>red</td>
  </tr>
  <tr>
    <td>black</td>
  </tr>
</table>

Answer 4

One way to achieve this using only CSS is by utilizing the CSS counter(..) function and specifying the counter-style parameter (list-style-type) for 'bengali'.

For example:

td::before { content: counter(some-counter, bengali) }

For more information, you can refer to the following resources: MDN: counter() and MDN: list-style-type

table {
    counter-reset: row 0;
}

tr {
    counter-increment: row;
}
td::before {
    content: counter(row, bengali) '. ';
}

<table border="1">
  <tr>
    <td>blue</td>
  </tr>
  <tr>
    <td>red</td>
  </tr>
  <tr>
    <td>black</td>
  </tr>
</table>

Automatically numbering table columns with custom language localization in JavaScript using Jquery

Answer №1

Answer №2

Similar questions

Utilizing AJAX to dynamically update a DIV element in CodeIgniter's controller

Combine jQuery and CSS to create a scrollable and extended fixed header

Centering text both vertically and horizontally over an image using CSS

Choosing options from a drop-down menu based on the selection of a radio button with ever-changing

How to apply custom styling to a specific element within an Angular Material 2 component using CSS based on its Id or

The rationale behind organizing analogous variables into groups

What is the level of visibility in Nextjs?

Is there a method in Express to verify which URL a post is being sent to?

No data received from XMLHttpRequest

Automated service worker upgrade procedure

The jQuery bxSlider is failing to function properly in a responsive design

State in Vuex is failing to update effectively when actions are being utilized

Navigating programmatically to another page in Next.js can be easily achieved by utilizing the useRouter hook

Error encountered with Vuetify stepper simple component wrapper and v-on="$listeners" attribute

The menu is about to receive some custom styling

Guide on incorporating JSON information into an HTML table

Having trouble with importing SendInBlue into my NodeJS application?

`What can be done if ng-if is not responding?`

What is the best way to embed a section of another website within an iframe and seamlessly guide a user to complete a purchase using a shopping cart?

Integrate ruby code within a javascript string