Question

我正在使用Datatables，动态地将Rows添加到我的表中，我有3列，

索引
文本
CharCount

我需要逻辑来实现每个＆＃39; Text＆＃39;的字符数。列中的相应＆＃39; CharCount＆＃39;字段，

这是我的代码 -

$(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>

例如，用户在“文本”列中键入内容，使用on 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>

动态字符数

1 个答案: