Js Jquery td auto numbering with custom locale language-CodePudding

Is there any way to auto numbering table data with local or custom language. I'm a Bengali, I know how to auto numbering table each row 1st data using css and js. But I don’t know how to use custom number, e.g. Bangla or Arabic.

Look at my code:

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

I want something like that;

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

How can I get that using Javascript / jquery.. Without adding any third party plugin.

CodePudding user response：

You need to use toLocaleString() method or Intl.NumberFormat() constructor with the locale language as a parameter.

For example.

For Arabic numbers num.toLocaleString('ar-EG').
For 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>

CodePudding user response：

A CSS only solution would be using the CSS counter(..) function and pass the counter-style parameter (list-style-type) for 'bengali'.

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

Reference: 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>