Tengo un problema al agregar una entrada dinámicamente con un separador de miles, cuando hago clic en agregar y aparece el formulario de entrada. debería ser cuando escriba el número, se ordenará en separador de miles. por favor, ayúdame
$(document).ready(function(){ $(document).on('click', '.add', function(){ var html = ''; html += '<tr>'; html += '<td><input type="text" name="item_name[]" class="form-control inputnumber" onkeypress="return event.keyCode > 47 && event.keyCode < 58 || event.keyCode == 46" /></td>'; html += '</tr>'; $('#item_table').append(html); }); $('input.inputnumber').keyup(function(event) { if (event.which >= 37 && event.which <= 40) return; $(this).val(function(index, value) { return value // Keep only digits and decimal points: .replace(/[^\d.]/g, "") // Remove duplicated decimal point, if one exists: .replace(/^(\d*\.)(.*)\.(.*)$/, '$1$2$3') // Keep only two digits past the decimal point: .replace(/\.(\d{2})\d+/, '.$1') // Add thousands separators: .replace(/\B(?=(\d{3})+(?!\d))/g, ",") }); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="table-repsonsive"> <table class="table table-bordered" id="item_table"> <tr> <th><button type="button" name="add" class="btn btn-success btn-sm add">ADD</button></th> </tr> </table> </div>Puedes usar el objeto NumberFormat
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
$(document).ready(function() { $(document).on('click', '.add', function() { var html = ''; html += '<tr>'; html += '<td><input type="text" name="item_name[]" class="form-control inputnumber" ></td>'; html += '</tr>'; $('#item_table').append(html); }); $('#item_table').change(function(event) { if (event.target.classList.contains("inputnumber")) { // remove any commas from earlier formatting const value = event.target.value.replace(/,/g, ''); // try to convert to an integer const parsed = parseInt(value); // check if the integer conversion worked and matches the expected value if (!isNaN(parsed) && parsed == value) { // update the value event.target.value = new Intl.NumberFormat('en-US').format(value); } } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="table-repsonsive"> <table class="table table-bordered" id="item_table"> <tr> <th><button type="button" name="add" class="btn btn-success btn-sm add">ADD</button></th> </tr> </table> </div>Usaría el constructor Intl.NumberFormat() . Puede encontrar los documentos y todas las diferentes opciones aquí: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
En el fragmento a continuación, verá el cambio de formato a medida que escribe. Si agrega texto, simplemente eliminará el texto. Si agrega un segundo decimal, no hará nada al principio. He olvidado la mayor parte del jQuery que alguna vez conocí, así que escribí el fragmento en Vanilla JS. Incluí comentarios en cada línea para explicar el paso.
const table = document.querySelector(`#item_table`); // Add an event listener to the button in the form table.querySelector(`button`).addEventListener(`click`, function() { // Create a <tr> element const tr = document.createElement(`tr`); // Create a <td> element const td = document.createElement(`td`); // Create an <input> element const inpt = document.createElement(`input`); // Add the input attributes inpt.type = `text`; inpt.classList.add(`form-control`); inpt.classList.add(`inputnumber`); // Add an event listener to the input element inpt.addEventListener(`keyup`, function(event) { // Current string value of the input const value = this.value; // Split the value string into an array on each decimal and // count the number of elements in the array const decimalCount = value.split(`.`).length - 1; // Don't do anything if a first decimal is entered if (event.key === `.` && decimalCount === 1) return // Remove any commas from the string and convert to a float // This will remove any non digit characters and second decimals const numericVal = parseFloat(value.replace(/,/g, '')); //NumberFormat options const options = { style: `decimal`, maximumFractionDigits: 20, }; // Assign the formatted number to the input box this.value = new Intl.NumberFormat(`en-US`, options).format(numericVal); }) // Append the input to the td td.append(inpt); // Append the td to the tr tr.append(td); // Append the tr to the table table.append(tr); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="table-repsonsive"> <table class="table table-bordered" id="item_table"> <tr> <th><button type="button" name="add" class="btn btn-success btn-sm add">ADD</button></th> </tr> </table> </div>