Dynamic Character Count

Question

Я использую DataTables, чтобы Динамически добавить строки в моей таблице, У меня есть 3 колонки,

1. Index
   
2. Текст
   
3. CharCount
   

I нужна логика для выполнения символа каждого столбца «Текст» в соответствующем поле «CharCount»,

Вот мой код -

$(document).ready(function() { 
    var t = $('#example').DataTable(); 
    var counter = 1; 

    $('#addRow').on('click', function() { 
     t.row.add([ 
      counter, 
      '<input type="text" id=textBox'+counter+'/>', 
      '<input type="text" id=counterBox'+counter+' disabled="true"/>' 
     ]).draw(false); 

     counter++; 
    }); 

    // Automatically add a first row of data 
    $('#addRow').click(); 
}); 

<script src="https://code.jquery.com/jquery-1.12.3.js"></script> 
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"> 

<button id="addRow">Add</button>  
<table id="example" class="display" cellspacing="0" width="100%"> 
    <thead> 
     <tr> 
      <th>Index</th> 
      <th>Text</th> 
      <th>CharCount</th> 
     </tr> 
    </thead> 
    <tfoot> 
     <tr> 
      <th>Index</th> 
      <th>Text</th> 
      <th>CharCount</th> 
     </tr> 
    </tfoot> 
</table> 

Так, например, пользователь что-то в столбце Текст,
используя на KeyUp случае, мне нужно общее количество символов, набранный ,
будет отображаться в соответствующем текстовом поле столбца CharCount.

Answer 1

Вы можете использовать jQuery .map(), чтобы пройти все поля.

$(document).ready(function(){ 
 
      var t = $('#example').DataTable(); 
 
      var counter = 1; 
 
      $('#addRow').on('click', function() { 
 
       t.row.add([ 
 
        counter, 
 
        '<input type="text" id="textBox'+counter+'" />', 
 
        '<input type="text" id="counterBox'+counter+'" readonly />' 
 
       ]).draw(false); 
 

 
       counter++; 
 
      }); 
 
    
 
      $(document).on('keyup', 'input[id^=textBox]', function() { 
 
       $(this).parents('tr').find('input[id^=counterBox]').val($(this).val().length); 
 
      }); 
 

 
      // Automatically add a first row of data 
 
      $('#addRow').click(); 
 
});

<script src="https://code.jquery.com/jquery-1.12.3.js"></script> 
 
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
 
    
 
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"> 
 
    <button id="addRow">Add</button> 
 
    <table id="example" class="display" cellspacing="0" width="100%"> 
 
     <thead> 
 
      <tr> 
 
       <th>Index</th> 
 
       <th>Text</th> 
 
       <th>CharsLeft</th> 
 
      </tr> 
 
     </thead> 
 
     <tfoot> 
 
      <tr> 
 
       <th>Index</th> 
 
       <th>Text</th> 
 
       <th>CharsLeft</th> 
 
      </tr> 
 
     </tfoot> 
 
    </table>