Editable cells in dynamic table

Question

I'm trying to make a dynamic table with variable no. of rows and columns. Table is created but when i click on the cells, they are not editable as i assumed they will be.

$(document).ready(function() {
            $("#createit").click(function() {
                var num_rows = document.getElementById('rows').value;
                var num_cols = document.getElementById('cols').value;
                var tbody = '';
                for (var i = 0; i < num_rows; i++) {
                    tbody += '<tr>';
                    for (var j = 0; j < num_cols; j++) {
                        tbody += '<td tabindex=' + j + '>';
                        tbody += 'Cell' + i + j;
                        tbody += '</td>'
                    }
                    tbody += '</tr>';
                }
                //document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
                $('.editableTable').append(tbody);
            });
        });
        $(".editableTable td").dblclick(function() {
            console.log('clicked');
            var OriginalContent = $(this).text();
            $(this).addClass("cellEditing");
            $(this).html("<select><option>1</option><option>2</option><option >3</option></select>");
            $(this).children().first().focus();
            $(this).bgColor = 'red';

            $(this).children().first().keypress(function(e) {
                if (e.which == 13) {
                    var newContent = OriginalContent;
                    $(this).parent().text(OriginalContent);
                    $(this).parent().removeClass("cellEditing");
                }
            });
            $(this).children().first().blur(function() {
                $(this).parent().text(OriginalContent);
                $(this).parent().removeClass("cellEditing");
            });
        });
        $(".editableTable td").bind('keydown', function(event) {
            if (event.keyCode === 9 || event.keyCode === 13) {
                var tabindex = $(this).attr('tabindex');
                tabindex++; //increment tabindex
                $('[tabindex=' + tabindex + ']').focus().dblclick();
                return false;
            }
        });

.editableTable {
            border: solid 0px;
            width: 100%;
            text-align: center
        }

        .editableTable td {
            border: solid 0.5px;
            border-color: lightblue;
            min-width: 100px;
        }

        .editableTable .cellEditing {
            padding: 0;
        }

        select {
            border: 0px;
            width: 100%;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Rows: <input type="text" name="rows" id="rows"/></label><br />
    <label>Cols: <input type="text" name="cols" id="cols"/></label><br/>
    <input name="generate" type="button" value="Create Table!" id='createit' />
    <div id="wrapper">
        <table class="editableTable">
            <tbody></tbody>
        </table>
    </div>

Same thing i have done before but with a static table. JSFIDDLE https://jsfiddle.net/rbrohitbisht/691rx62k/

Now i want to do the same thing with the dynamic table. What i'm doing wrong here?

Answer 1

The operation should be moved into the createit handler definition.

 $(".editableTable td").dblclick(function() {...});

Just after the cells are created(of course after a click on Crete Table!).

Otherwise the selector $(".editableTable td") would not return anything before the dynamic table is in place.

Answer 2

You should add contenteditable="true" to your code

https://codepen.io/anon/pen/XgJaxE

$(document).ready(function() {
        $("#createit").click(function() {
            var num_rows = document.getElementById('rows').value;
            var num_cols = document.getElementById('cols').value;
            var tbody = '';
            for (var i = 0; i < num_rows; i++) {
                tbody += '<tr>';
                for (var j = 0; j < num_cols; j++) {
                    tbody += '<td contenteditable="true" tabindex=' + j + '>';
                    tbody += 'Cell' + i + j;
                    tbody += '</td>'
                }
                tbody += '</tr>';
            }
            //document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
            $('.editableTable').append(tbody);
        });
    });
    $(".editableTable td").dblclick(function() {
        console.log('clicked');
        var OriginalContent = $(this).text();
        $(this).addClass("cellEditing");
        $(this).html("<select><option>1</option><option>2</option><option >3</option></select>");
        $(this).children().first().focus();
        $(this).bgColor = 'red';

        $(this).children().first().keypress(function(e) {
            if (e.which == 13) {
                var newContent = OriginalContent;
                $(this).parent().text(OriginalContent);
                $(this).parent().removeClass("cellEditing");
            }
        });
        $(this).children().first().blur(function() {
            $(this).parent().text(OriginalContent);
            $(this).parent().removeClass("cellEditing");
        });
    });
    $(".editableTable td").bind('keydown', function(event) {
        if (event.keyCode === 9 || event.keyCode === 13) {
            var tabindex = $(this).attr('tabindex');
            tabindex++; //increment tabindex
            $('[tabindex=' + tabindex + ']').focus().dblclick();
            return false;
        }
    });

Answer 3

use HTML DOM "contentEditable" Property Element Object https://stackoverflow.com/a/44380264/3615816

<input type=button value="Enable editing"
onclick="document.getElementById('t1').contentEditable = 'true';alert('You can now edit table')" />

<table id="t1"   border="1">
 
  <tr><td >c1</td><td >c2</td></tr>
  <tr><td >cc1</td><td >cc2</td></tr>

</table>

<input type=button value="disable editing"
onclick="document.getElementById('t1').contentEditable = 'false'; " />

Answer 4

 $(document).ready(function () {
        $("#createit").click(function () {
            var num_rows = document.getElementById('rows').value;
            var num_cols = document.getElementById('cols').value;
            var tbody = '';
            var tabindex = 0
            for (var i = 0; i < num_rows; i++) {
                tbody += '<tr>';
                for (var j = 0; j < num_cols; j++) {
                    tbody += '<td tabindex=' + tabindex++ + '>';
                    tbody += 'Cell' + i + j;
                    tbody += '</td>'
                }
                tbody += '</tr>';
            }
            //document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
            $('.editableTable').append(tbody);
        });
    });
    $(document).on('dblclick', 'td', function () {
        console.log('clicked');
        this.contentEditable = 'true';
    });
    $(document).on('keydown', 'td', function (event) {
        if (event.keyCode === 9 || event.keyCode === 13) {
            this.contentEditable = 'false';
            //  $(this).next().focus().dblclick().focus();
            var tabindex = $(this).attr('tabindex');
            tabindex++;
            var next = $('[tabindex=' + tabindex + ']').focus().dblclick();
            if (next.is('td') == false)
                return true;
            var sel, range;
            if (window.getSelection && document.createRange) {
                range = document.createRange();
                range.selectNodeContents(next[0]);
                range.collapse(true);
                sel = window.getSelection();
                sel.removeAllRanges();
                sel.addRange(range);
            } else if (document.body.createTextRange) {
                range = document.body.createTextRange();
                range.moveToElementText(next[0]);
                range.collapse(true);
                range.select();
            }

            return false;
        }
    });

.editableTable {
            border: solid 0px;
            width: 100%;
            text-align: center
        }

        .editableTable td {
            border: solid 0.5px;
            border-color: lightblue;
            min-width: 100px;
        }

        .editableTable .cellEditing {
            padding: 0;
        }

        select {
            border: 0px;
            width: 100%;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Rows: <input type="text" name="rows" id="rows"/></label><br />
    <label>Cols: <input type="text" name="cols" id="cols"/></label><br/>
    <input name="generate" type="button" value="Create Table!" id='createit' />
    <div id="wrapper">
        <table class="editableTable">
            <tbody></tbody>
        </table>
    </div>