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

Transmit information using $broadcast when a button is clicked, and retrieve that information using $scope.$on

Eliminating white space - A CSS and HTML page with no room for gaps

I'm looking to display images in a designated React component using create react app. What is the best way to accomplish

Encountering an error while attempting to add class-constructed objects to an array list in React/NextJs: "Unable to add property 0, as the object is

Hide the footer DIV in CSS by making it disappear with a height of 100%

Utilize JavaScript variables with jQuery: A simple guide

Inconsistency in naming of jQuery CSS properties

Show a preview of an image in an HTML document

Creating a JSON formatting structure with three layers of nesting

Troubleshooting Issue: MVC 5 validation messages not displaying when using Ajax.BeginForm

Using ThreeJS/WebGL to Send Functions to Shaders

Triggering updates from multiple controls in a GridView using ASP.NET

Combining several markdown files into a unified HTML document

What distinguishes v-text from v-load in Vue.js when concealing {{ Mustache }}?

Radio button triggers an ajax call once, but then fails to function

What is the best way to compare two arrays of objects and then append a new key to the objects in the second array?

Calculating the sum of all words that have been successfully finished

Display and view .dwg files using Javascript, HTML, and Angular

Designing a webpage compatible across different browsers that features an image positioned relatively over two rows of a table

Executing Client-Side Function Upon Data Retrieval in a Node.js Application